SASS用法
CSS是一种样式设计语言。有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
本文介绍SASS，觉得它有很多优点。下面是一些用法总结。
一、什么是SASS
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
本文总结了SASS的主要用法。有了这篇文章，日常的一般使用就不需要去看官方文档了。
二、安装和使用
2.1 安装
SASS是Ruby语言写的，所以必须先安装Ruby，再安装SASS。Ruby下载地址：https://www.ruby-lang.org/en/downloads/
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后，就可以使用了。
2.2 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.cssSASS提供四个编译风格的选项：
* 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/stylesheetsSASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
三、基本用法
3.1 变量
SASS允许使用变量，所有变量以$开头。
$blue : #1875e7; div { color : $blue; }
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left; .rounded { border-#{$side}-radius: 5px; }
3.2 计算功能
SASS允许在代码中使用算式：
body { margin: (14px/2); top: 50px + 100px; right: $var * 10%; }
3.3 嵌套
sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
SASS允许选择器嵌套。比如，下面的CSS代码：
.car .bwm { color : red; }
可以写成：
.car { .bwm{ color : red; } }
多人协作时，建议使用，每人写自己选择器里的样式，不会污染其他人的样式。
属性也可以嵌套，如下：
//sass style //------------------------------- .fakeshadow { border: { style: solid; left: { 4px; color: #888; } right: { width: 2px; color: #ccc; } } } //css style //------------------------------- .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a { &:hover { color: #ffb3ff; } }
3.4 注释
sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。
标准的css注释
/* *我是css的标准注释 *设置body内距 */ body{ padding:5px; }
双斜杆单行注释
单行注释跟JavaScript语言中的注释一样，使用又斜杠（//），但单行注释不会输入到CSS中。
//我是双斜杠表示的单行注释 //设置body内距 body{ padding:5px; //5px }
四、代码的重用
4.1 继承
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。
//sass style //------------------------------- h1{ border: 4px solid #ff9aa9; } .speaker{ @extend h1; border-width: 2px; } //css style //------------------------------- h1,.speaker{ border: 4px solid #ff9aa9; } .speaker{ border-width: 2px; }
4.2 Mixin
Mixin有点像C语言的宏（macro），是可以重用的代码块。
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
无参数mixin
//sass style //------------------------------- @mixin center-block { margin-left:auto; margin-right:auto; } .demo{ @include center-block; } //css style //------------------------------- .demo{ margin-left:auto; margin-right:auto; }
有参数mixin
调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。
//sass style //------------------------------- @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; } .imgtext-h li{ @include horizontal-line(1px solid #ccc); } .imgtext-h--product li{ @include horizontal-line($padding:15px); } //css style //------------------------------- .imgtext-h li { border-bottom: 1px solid #cccccc; padding-top: 10px; padding-bottom: 10px; } .imgtext-h--product li { border-bottom: 1px dashed #cccccc; padding-top: 15px; padding-bottom: 15px; }
4.3 占位选择器%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
//sass style //------------------------------- %ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; } %clearfix{ @if $lte7 { *zoom: 1; } &:before, &:after { content: ""; display: table; font: 0/0 a; } &:after { clear: both; } } #header{ h1{ @extend %ir; width:300px; } } .ir{ @extend %ir; } //css style //------------------------------- #header h1, .ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; } #header h1{ width:300px; }
如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
ps：在@media中暂时不能@extend @media外的代码片段，以后将会可以。
4.4 导入文件
sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。
文件a.scss：
//a.scss //------------------------------- body { background: #eee; }
文件b.scss：
@import "reset.css"; @import "a"; p{ background: #0982c1; }
转译出来的b.css样式：
@import "reset.css"; body { background: #eee; } p{ background: #0982c1; }
根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。
五、高级用法
5.1 函数
sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
//sass style //------------------------------- $baseFontSize: 10px !default; $gray: #ccc !defualt; // pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem; } body{ font-size:$baseFontSize; color:lighten($gray,10%); } .test{ font-size:pxToRem(16px); color:darken($gray,10%); } //css style //------------------------------- body{ font-size:10px; color:#E6E6E6; } .test{ font-size:1.6rem; color:#B3B3B3; }
自定义函数
SASS允许用户编写自己的函数。
@function double($n) { @return $n * 2; } #sidebar { width: double(5px); }
5.2 条件判断
@if判断
@if可一个条件单独使用，也可以和@else结合多条件使用
//sass style //------------------------------- $lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1; } } p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //css style //------------------------------- .ib{ display:inline-block; *display:inline; *zoom:1; } p { color: green; }
三目判断
语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px5.3 循环语句
for循环
for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
//sass style //------------------------------- @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //css style //------------------------------- .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
@each循环
语法为：@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
list:list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。
map:map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等。
单个字段list数据循环
//sass style //------------------------------- $animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } //css style //------------------------------- .puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); }
多个字段list数据循环
//sass style //------------------------------- $animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move); @each $animal, $color, $cursor in $animal-data { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } } //css style //------------------------------- .puma-icon { background-image: url('/images/puma.png'); border: 2px solid black; cursor: default; } .sea-slug-icon { background-image: url('/images/sea-slug.png'); border: 2px solid blue; cursor: pointer; } .egret-icon { background-image: url('/images/egret.png'); border: 2px solid white; cursor: move; }
多个字段map数据循环
//sass style //------------------------------- $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings { #{$header} { font-size: $size; } } //css style //------------------------------- h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }
5.4 while循环
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
-------------------------------------------------------------------------------------------------------------------------------------
完
转载需注明转载字样，标注原作者和原博文地址。
更多阅读：
http://www.w3cplus.com/sassguide/syntax.html
http://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html
http://www.w3cplus.com/preprocessor/sass-other-function.html