Sass 总结

Sass是一种动态样式语言，比CSS多出好些功能（如变量、嵌套、运算、混入、继承、颜色处理、函数等），更容易阅读。

Sass和Less是当下最为流行的2门CSS预处理语言

（1）Sass由于是使用Ruby编写的，所以编译的时候是在服务器端处理；
而Less由于是使用JavaScript编写的，所以编译的时候是在浏览器端处理；
（2）Sass拥有更为强大的功能，如循环、函数、混合宏等，而less却没有；
（3）Sass拥有成熟稳定的框架来辅助开发，特别是Compass，而less却没有；
（4）Sass在国内外讨论热度最大，并且有一个稳定强大的团队在维护；
（5）相当多的公司更为倾向于使用Sass，而不是less；

在Sass中，有2种语法格式：（1）Sass格式；（2）Scss格式
Sass格式：不使用大括号“{}”和分号“;”，使用严格的缩进式语法
Scss格式：使用大括号“{}”和分号“;”，并不使用严格的缩进式语法规则

Sass的安装和使用

参考

Sass的语法基础

Sass变量

一般值，这个值可以是数字、字符串

$width:10px;
div{ font-size:$width;  }

div{  font-size:10px;  }   // 编译出来的CSS代码
-------------------------------------------------

$width:10px !default;
.div1 {  width:$width;  }
.div2 { $width:20px;   width:$width;  }

.div1{  width:10px; }
.div2{  width:20px;  }
--------------------------------------------

变量的作用域:（1）全局变量；（2）局部变量。

$color:red;             //定义全局变量
body{
    $color:green;       //定义局部变量
    div {  color:$color;   //调用局部变量 }
}

数据类型

数字值
$lineHeight:1.5;
$fontSize:14px;
$width:50%;

字符串：有引号---无引号
$logoUrl: "images/logo.png";
$str2:bold;

布尔值：用于“@if…@esle…语句”
$a:10px;
$b:5px;
@if($a>$b){ ... } @else {  ...  }

颜色值
（1）关键字颜色值，如red；
（2）十六进制颜色值，如#FFFF00；
（3）RGB颜色值，如rgb(255,255,0)；
（4）HSL颜色值，如；hsl(360,50%,50%)；

列表值
$margin:20px 40px;
$border:1px solid gray;

Map值
$变量名: ( 键名1:值1, …… 键名n:值n  );

Sass嵌套

（1）选择器嵌套；
$color1:red;
$color2:green;
body{
    color:$color1;
    .column
    {  color:$color2;  }   }
编译
body  { color: red; }
body .column { color: green;  }

（2）属性嵌套；---  CSS有些属性的前缀是相同的
（1）border-top、border-right、border-bottom、border-left----“border”；
（2）margin-top、margin-right、margin-bottom、margin-left----“margin”；
（3）font-family、font-size、font-weight、font-variant-----“font”；

font:{ family:Arial; size:14px;  weight:bold;}  //  嵌套属性前缀加冒号“:”
变成：font-family: Arial;   font-size: 14px;   font-weight: bold;

（3）伪类嵌套；--- 借助“&”符号
$color1:red;  
$color2:green;
a{ color:$color1;    &:hover { color:$color2; }   }
编译
a{  color: red;  }
a:hover {  color: green;  }

Sass插值

#{变量}  

.item-#{$i}    //  插值用于“选择器名”
.item-$i      //  错误！！

#{$border}-width:1px;    // 插值用于“属性名”
border:#{$i}px solid red;  // 插值用于“属性值”

Sass注释

在Sass注释方式：（1）//注释内容；---- 编译后不会保留
（2）/*注释内容*/；
（3）/*!注释内容*/。 ----保留一些版权声明的注释说明

Sass基本运算

数字运算

一、Sass加法-减法
width:(100px + 20px);   //  width:120px;
width:(100px + 20em);   // Incompatible units: 'em' and 'px'

width: ($sidebar-width + $content-width + $gap-width)
减号“-”前后一定要有空格
width: ($container-width-$sidebar-width);
无法正确地识别哪个“-”是变量的一部分，哪个“-”是减号

三、Sass乘法
width:(100px * 2);   //  width:200px;
width:(100px * 2px);    //  两个都带单位,报错，200px*px

@for $i from 1 through 3{
    .item-#{$i} {  width:10px * $i; }   }
编译出来
.item-1{ width: 10px;  }
.item-2{ width: 20px;  }
.item-3{  width: 30px; }

--------------------------------------------------------
四、Sass除法
font:20px/10px;                 //纯CSS，不是除法运算
width:(20px/10px);              //使用了小括号，是除法运算，符合第1点
height:$height/2;               //使用了变量，是除法运算，符合第3点
line-height:round(1.5)/2;       //使用了函数，是除法运算，符合第3点
margin-left:10px + 10px/2px;    //使用了加号，是除法运算，符合第2点

字符运算

content: "fzx " + cookie;  //  content: "fzx cookie";
左边字符串是没有引号的，右边字符串是有引号的，结果是一个没有引号的字符串

颜色运算

color: (#010203 + #040506);   // color: #050709;
color: (#010203 * 2);       //  color: #020406;
color:(rgb(17,34,51) *2);  // color: #224466;
rgb(17,34,51转化为十六进制颜色值为“#112233”，然后进行乘法运算

Sass代码重用

（1）继承“@extend”；

.spriteAll{ bakckground:url(images/sprite.png) no-repeat;  }
.sprite-1{
    @extend .spriteAll;
    background-position:0 -30px;}

编译出来
.spriteAll, .sprite-1{ bakckground: url(images/sprite.png) no-repeat;}
.sprite-1{  background-position: 0 -30px; }

（2）占位符“%placeholder”；

• 需要保留基类的：只使用@extend来实现；
• 不需要保留基类的：使用@extend配合%placeholder来实现；

%btn{ border:1px solid silver; }
.btn-primary{
    @extend %btn;
    background-color:red;}

编译
.btn-primary{  border: 1px solid silver;}
.btn-primary {  background-color: red;}

（3）混合宏“@mixin”；

用“混合宏（mixin）”来处理经常被多个地方使用的相同的CSS代码块
用“@mixin”来定义一个混合宏，然后使用“@include”来调用一个混合宏

@mixin 混合宏名{ 样式属性1:取值1; …… }    //定义一个混合宏
选择器{  @include 混合宏名;  }    //调用一个混合宏

@mixin center($width){
    width: $width;
    margin-left: -($width) / 2;
}
div{  @include center(100px);}
编译出来
div {  width: 100px;   margin-left: -50px;}

---------------------------------
@mixin radius($radius:3px)    // 参数带默认值
@include radius;
@include radius(5px);

（1）继承和混合宏都能实现相同代码块的重用，极大提高开发效率；
（2）继承的使用一般不存在代码冗余，而混合宏的使用会存在代码冗余；
（3）继承不可以传递参数，而混合宏可以传递参数；

流程控制

（1）@if语句；

（1）@if…（单向选择）；
（2）@if…@else…（双向选择）；
（3）@if…@else if…（多向选择）；

@mixin checkColor ($width){
    @if ($width>100px) { color:red; }
    @else if ($width<100px){  color:green;  }
    @else{  color:blue; }
}
div{  @include checkColor(100px);  }
编译：
div{  color:blue;}

（2）@for循环；

方式1：@for $i from 开始值 through 结束值   ---  包括结束值
方式2：@for $i from 开始值 to 结束值   ---  不包括结束值

@for $i from 1 through 2{
    .border-#{$i} { border:#{$i}px solid red; }
}

.border-1{  border: 1px solid red; }
.border-2{  border: 2px solid red;}

（3）@while循环；

$i:3;
@while ($i>0){
    .item-#{$i} {  width: (20px + $i); }
    $i : ($i - 1);   //递减操作
}

（4）@each循环；
用@each循环快速生成背景图片样式

$list:sprite1,sprite2;
%spriteAll{ background:url("images/sprite.png") no-repeat;  }
@each $var in $list{
    .#{$var} {
        @extend %spriteAll;
        background-position: 0 index($list,$var) * (-30px);
    }
}
编译
.sprite1, .sprite2{ background: url("images/sprite.png") no-repeat;}
.sprite1{ background-position: 0 -30px; }
.sprite2{ background-position: 0 -60px; }