高效开发之SASS篇
作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~
他是谁?
作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用等等。作为一名程序员,不能编程怎么能忍受,这就是sass存在的意义,工业化生产,让CSS程序范儿。
主要目的就是让你写CSS时不在重复。
SASS优点可以简单的规纳为以下几点:
- 增加了一些编程特性
- 简少CSS代码的重复性与代码的冗余
- 维护方便
- 适应性更强,可读性更强
代码从层次不清楚?css不够灵活?开发繁杂而痛苦?开发费时费力?
有了SASS,麻麻再也不用担心我敲代码了
安装
SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
1. 安装ruby
如果你是WINDOWS 猛戳这里
下载rubyinstaller.exe 安装就可以了。
如果你是MAC
$ curl -L https://get.rvm.io | bash -s stable $ source ~/.rvm/scripts/rvm $ rvm -v $ rvm install 2.0.0 $ gem -v
可以看到版本号,说明安装成功!
假定你已经安装好了Ruby,接着在命令行输入下面的命令:
gem install sass
好啦,大神必备轻松带回家。
若gem命令出行错误,猛戳这里
2. 使用
俗话说,简单的才是最好的,SASS其实就是一普通的文本文件,支持CSS的所有格式,当然后缀名不同哦,他的后缀名是.scss,意思为Sassy CSS。 下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为crtest)
sass crtest.scss
如果要将显示结果保存成文件,后面再跟一个.css文件名。
sass crtest.scss crtest.css
怎么样,很简单吧
SASS提供四个编译风格的选项:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
生产环境当中,一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。
用法
1. 变量
在SASS中使用美元符号定义一个变量,在这个例子里,一个美元自负,变量名字加上一个冒号定义一个变量。
$blue : #1875e7;
div {
color : $blue;
}
当然,在SASS中有一些内建的功能,例如,darken,lighten来帮助你修改变量。下面例子里,我们使用lighten方法来生成段落中更亮的红色:
$red: #FF4848 $fontsize: 12px h1 color: $red p color: lighten($red, 10%)
在SASS中你还可以使用加减的方式来修改变量的值,如下:
p.addition_and_subtraction color: $red - #101 font-size: $fontsize + 10px
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
2. 计算
SASS允许在代码中使用算式:
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3. 嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:
div h1 {
color : red;
}
//可以写成:
div {
hi {
color:red;
}
}
//属性也可以嵌套,比如border-color属性,可以写成:
p {
border: {
color: red;
}
} //注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
a {
&:hover { color: #ffb3ff; }
}
4 注释
SASS共有两种注释风格。
标准的CSS注释 / comment / ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/
福利来了!
CSS也可以重用了
5. 继承
当我们需要为多个元素定义相同样式的时候,我们可以考虑使用继承的做法。
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;
}
class2要继承class1,就要使用@extend命令:
.class2 {
@extend .class1;
font-size:120%;
}
6. mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,调用这个mixin。
div {
@include left;
}
7. 颜色函数
如果你在为颜色的单调用法而烦恼,赶快mark
CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理,例如加亮、变暗、颜色梯度等。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
8. 插入文件
@import命令,用来插入外部文件。
很多 CSS 开发者对导入的做法都不太感冒,因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同,它只是在语义上包含了不同的文件,但最终结果是一个单一的 CSS 文件,如果你是通过 @ import "file.css";
导入 CSS 文件,那效果跟普通的 CSS 导入一样。注意:导入文件中定义的混入、变量等信息也将会被引入到主样式文件中,因此需要避免它们互相冲突。
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。
@import "foo.css";
9. 高级用法
神奇的在这里
9.1 条件语句
@if可以用来判断: p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
} 配套的还有@else命令: @if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
9.2 循环语句
SASS支持for循环:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
9.3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
看到这里,是不是感觉又重见天日了,大家应该了解了它的简单用法,大家如果有什么看法或见解,欢迎交流~
高效开发之SASS篇的更多相关文章
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- Mac高效开发之iTerm2、Prezto和Solarized主题
本文首发于个人网站:Mac高效开发之iTerm2.Prezto和Solarized主题 工欲善其事必先利其器,作为开发,我追求极致的高效,因此会在很多细节上追求效率,例如:命令行窗口敲命令的时候,如果 ...
- Mobile开发之meta篇
Mobile开发之meta篇 <meta name="viewport" content="width=device-width, initial-scale=1, ...
- iOS_高效开发之道
iOS_高效开发之道 话不多说, 总结一下个人感觉有利于提高iOS开发效率的几个小技巧. 本文将从下面几方面介绍: Xcode经常使用快捷键 Xcode调试技巧 Objc经常使用代码片段 Xcode插 ...
- 前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- AndroidWear开发之HelloWorld篇
通过前一篇的学习,我们把环境都搭建好了,这下我们就可以正真的开发了. 一.创建Wear项目 通过项目创建向导一步一步下去就可以创建好一个Wear项目: 1.新建项目,一次填入应用名字,应用包名,项目位 ...
- iOS高效开发之Xcode应用插件
前言:本文非原创 文章摘自 www.cocoachina.com/industry/20130918/7022.html 古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战 ...
- 开发之UI篇
首先这里介绍一个软件一个插件,它们的主要功能是方便开发者看UI(如尺寸,颜色,大小等),两个配合使用 一. Sketch软件 1.Sketch 看ui图,还可以切图 2.Sketch 如何切图: 1 ...
随机推荐
- 如何解决 Django中出现的 [Errno 13] Permission denied问题
环境:linux 如果你使用了Apache部署了Django项目,在上传文件时可能会出现 “[Errno 13] Permission denied:某目录”的错误. 这是因为apache没有权限在该 ...
- C++ string和c类型字符数组的比较
在c++中string是很方便操作的字符串,支持多种算数运算和比较运算,操作起来非常灵活.string也具有一些容器的性质,可以通过迭代器对字符元素进行访问 c类型的字符数组有如下三种初始化方式: / ...
- EPROCESS KPROCESS PEB
EPROCESS KPROCESS PEB <寒江独钓>内核学习笔记(2) 在学习笔记(1)中,我们学习了IRP的数据结构的相关知识,接下来我们继续来学习内核中很重要的另一批数据结 ...
- 利用Bootstrap框架制作查询页面的界面
UI设计实战篇——利用Bootstrap框架制作查询页面的界面 Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...
- [转]Avoiding GDB Signal Noise.
原文:http://peeterjoot.wordpress.com/2010/07/07/avoiding-gdb-signal-noise/ A quick note for future ref ...
- [转]ARM64 Function Calling Conventions
from apple In general, iOS adheres to the generic ABI specified by ARM for the ARM64 architecture. H ...
- [google面试CTCI] 2-0.链表的创建
创建链表.往链表中插入数据.删除数据等操作,以单链表为例. 1.使用C语言创建一个链表: typedef struct nd{ int data; struct nd* next; } node; / ...
- WP中一些耗时的东西
MediaPlayer.GameHasControl 耗时1.5ms MediaPlayer.State 耗时0.4ms 上面两个原本放在游戏的update中,后来注释掉发现其它的游戏逻辑只要0.2m ...
- linux 高精度定时器例子
//author:DriverMonkey //phone:13410905075 //mail:bookworepeng@Hotmail.com //qq:196568501 #include &l ...
- LAMP编译安装遇到的问题
apache安装 1, no SSL-C headers found configure: error: ...No recognized SSL/TLS toolkit detected 解决办法: ...