一、 简介
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
Sass、Less，和Stylus是众多CSS预处理器语言中使用最广泛的。
SASS与SCSS的区别：Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名。2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
SASS提供四个[编译风格]的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
二、用法（可与less对比）
（一）变量
$变量名
普通变量：$变量名:值;
默认变量：$变量名:值!default;
变量调用：$变量名
建议在以下条件使用变量的声明 1.该值至少重复出现了两次；2.该值至少可能会被更新一次；3.该值所有的表现都与变量有关（非巧合）。
（二）嵌套
sass与less相同，均可以进行选择器的嵌套，表示层级关系
（三）导入
在一个sass文件中可以导入另一sass文件，最后编译为一个css文件
@import ‘导入文件名’ //导入的sass文件名不带后缀
（四）混合、继承/拓展
单纯的将一个类的属性应用到另一个类中而无需传入参数时，在复用时前加@extend
eg： .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
若需要传入参数，则在需要传入的类名前加@mixin ，在混合使用时前加@include
@mixin:声明混合宏
@include:来调用声明好的混合宏
eg @mixin box-sizing ($sizing:5px) {//此处5px为默认值,也可以传入多个参数
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
（五）运算 可编译时进行简单加减乘除运算
如：变量与变量，值与值，颜色与颜色，字符（串）与字符（串）
（六）颜色
sass中集成了大量的颜色函数，让变换颜色更加简单。
eg： color:darken(#08c,10%);
（七）占位符 %placeholder
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
eg： %mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
编译后的css：
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
（七）混合宏 VS 继承 VS 占位符
（八）插值
#{$变量名}当你想设置属性值的时候你可以使用字符串插入进来
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);
编译出来的css：
css.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }
局限性：1.可能会删除用于 Sass 变量的插值。2.不能在 mixin 中调用。3.不能在include中调用（但是可以使用 @extend 中使用插值。）
（九）注释
同less一样，可使用“/* */” 和“//”进行注释，区别在于使用“//”注释的文字编译后生成的css文件中不会显示注释部分，而“/* */”得注释内容会出现在编译后的css文件中
（十）数据类型
Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：
（1） 数字: 如，1、 2、 13、 10px；
（2）字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
注意：1.使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。
2.当 deprecated = property syntax 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号
（3）颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
（4）布尔型：如，true、 false；
（5）空值：如，null；
（6）值列表：通过空格或者逗号分隔的一系列的值，如:margin: 10px 15px 0 0
事实上独立的值也被视为值列表——只包含一个值的值列表。
Sass列表函数（Sass list functions）赋予了值列表更多功能：
nth函数（nth function） 可以直接访问值列表中的某一项；
join函数（join function） 可以将多个值列表连结在一起；
append函数（append function） 可以在值列表中添加值；
@each规则（@each rule） 则能够给值列表中的每个项目添加样式。
（十一） sass的控制命令
（1）@if
@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。
eg：假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。
//SCSS
@mixin blockOrHidden($boolean:true) {
@if $boolean {
@debug "$boolean is #{$boolean}";
display: block;
}
@else {
@debug "$boolean is #{$boolean}";
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden{
@include blockOrHidden(false);
}
编译出来的CSS:
.block {
display: block;
}
.hidden {
display: none;
}
（2）@for循环
在sass中有两种for循环实现方式。
@for $i from <start> through <end>、
@for $i from <start> to <end>
其中，$i 表示变量、start 表示起始值、end 表示结束值
两者区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。
eg：@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
（3）@while循环
@while 后面的条件为 true 就会执行
（4）@each .. in .. 循环
@each $var in <list>
其中，$var为变量名，<list>为值列表。
（5）函数
字符串函数
unquote($string)：删除字符串中的引号；
quote($string)：给字符串添加引号。
To-upper-case()、To-lower-case()
数字函数
percentage($value)：将一个不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：将大于自己的小数转换成下一位整数；
floor($value)：将一个数去除他的小数部分；
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值；
random(): 获取随机数
eg: .footer{
width : percentage(0.5);//50%
width : round(0.5); //1
width : ceil(0.5); //1
width : floor(0.5); //0
width : abs(-0.5); //0.5
width : min(1,2,3,4); //1
width : max(1,2,3,4); //4
width : random(); //随机数
}
列表函数
length($list)：返回一个列表的长度值；
nth($list, $n)：返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])：将两个列表连接成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
zip(solid dashed,1px 2px,green blue)
((1px "solid" #008000), (2px "dashed" #0000ff))
index($list, $value)：返回一个值在列表中的位置值。
Introspection函数（判断类型函数）
type-of($value)：返回一个值的类型
unit($number)：返回一个值的单位
unitless($number)：判断一个值是否带有单位
comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并
Miscellaneous 函数（三元条件函数）
if($condition,$if-true,$if-false)
表达式的意思是当 $condition 条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。
Map（数据地图，也有人称其为数组）
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
map相关函数
map-get($map,$key) 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。
map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key，则函数返回 true，否则返回 false。
map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量，那他就是一个列表。
map-values($map) 函数类似于 map-keys($map) 功能，不同的是 map-values($map )获取的是 $map 的所有 value 值，可以说也将是一个列表。
map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。
keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args 变成 key(会自动去掉$符号)，而 $args 对应的值就是value。
颜色函数
rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
关于 HSL 的颜色函数
hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度 (saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($color)：从一个颜色中获取色相（hue）值；
saturation($color)：从一个颜色中获取饱和度（saturation）值；
lightness($color)：从一个颜色中获取亮度（lightness）值；
adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
Opacity函数
alpha($color) /opacity($color)：获取颜色透明度值；
rgba($color, $alpha)：改变颜色的透明度值；
opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。
（十二） sass的@规则
1.@import
Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
若导入的scss/sass文件不希望被编译，则可以在文件名前面加一个下划线(如—命名为_colors.scss文件)，就能避免被编译。 并在引入该文件时省略掉文件名前面的下划线（@import "colors";//不用加下划线）。
*注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存。
2.@media
<media type>：指定设备类型（IE8及以下只能实现CSS2中，即设置媒体类型）
<expression>：指定媒体查询使用的媒体特性（css3）
@media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。
3.@extend
.@extend 是用来扩展选择器(类选择器，其他任何选择器，如a:hover等)或占位符(%***)
4.@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。
5.@debug
@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug
6.@warn
@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass
7.@error
@error和 @warn、@debug 功能是如出一辙
网友评论