sass入门语法小结

1.Sass是以严格的缩进式语法，不带大括号和分号。

2.安装Sass
安装Ruby后
控制台：gem install sass

3.查询Sass
sass -v

4.更新Sass
gem update sass

5.卸载Sass
gem uninstall sass

6.文件扩展名为.sass 就只能是老语法，没有括号与分号；
文件扩展名为.scss使用的是新语法，有括号和分号。

7.Sass命令编译
（1）单文件编译：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
（2）多文件编译
sass sass/:css/
（3）开启watch功能，不用每次改变都执行上面命令一遍：
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

8.界面工具编译，个人使用考拉。

9.自动化编译：Grunt以及Gulp

10.嵌套输出方式nested：
在编译的时候带上参数“ --style nested”

11.展开输出方式expanded：
在编译的时候带上参数“ --style expanded”，
这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行。

12.紧凑输出方式compact：
在编译的时候带上参数“ --style compact”

13.压缩输出方式compressed：
在编译的时候带上参数“ --style compressed”，
压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。

语法：
14.声明变量 用$符号

15.默认变量：sass 的默认变量仅需要在值后面加上 !default 即可。sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
例如：

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
   line-height: $baseLineHeight; 
}

注：全局变量就是定义在元素外面的变量。当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

16.嵌套-属性嵌套

.box {
   border-top: 1px solid red;
   border-bottom: 1px solid green;
}

//在 Sass 中我们可以这样写：
.box {
   border: {
     top: 1px solid red;
     bottom: 1px solid green;
   }
}

17.嵌套-伪类嵌套（跟属性嵌套差不多）

.clearfix{
    &:before,&:after {
        content:"";
        display: table;
    }
    &:after {
       clear:both;
       overflow: hidden;
    }
}

18.混合宏(@mixin开头)

//（1）声明不带参的混合宏
@mixin ...{ }
//（2）带参的混合宏
@mixin border-radius($radius:5px){
       border-radius: $radius;
}
//（3）复杂的混合宏
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
     @include prefixer(box-shadow, $shadow);
} @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

注：复杂的混合宏中的逻辑关系（@if...@else）后面小节会有讲解。
（4）调用混合宏：
@include 混合宏名字

19.混合宏的参数

（1）传一个不带值得参数
@mixin border-radius($radius){
   border-radius: $radius;
}
//在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候可以给这个混合宏传一个参数值：
.box {
　　@include border-radius(3px);
}

（2）传一个带值得参数
@mixin border-radius($radius:3px){
　　border-radius: $radius;
}
//在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。
//在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:

.btn {
　　@include border-radius;
}
//但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：

.box {
　　@include border-radius(50%);
}
（3）传多个参数（与前面类似，就是多几个变量）
//注： 有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代。
例如：@mixin box-shadow($shadows...){}

（4）混合宏的不足：会生成冗余的代码块，不会自动合并相同的样式代码。

20.继承（@extend）:
继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器。

.btn {
　　border: 1px solid #ccc;
　　padding: 6px 10px;
　　font-size: 14px;
}

.btn-primary {
　　background-color: #f36;
　　color: #fff;
　　@extend .btn;
}

21.占位符（%名字）：
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。可以取代以前 CSS 中的基类造成的代码冗余的情形。

%mt5 {
　　margin-top: 5px;
}
%pt5{
　　padding-top: 5px;
}

.btn {
　　@extend %mt5;
　　@extend %pt5;
}

22.插值 #{}
当你想设置属性值的时候你可以使用字符串插入进来。

$properties: (margin, padding);
@mixin set-value($side, $value) {
　　@each $prop in $properties {
　　　　#{$prop}-#{$side}: $value;
　　}
}
.login-box {
　　@include set-value(top, 14px);
}
它可以让变量和属性工作的很完美，上面的代码编译成 CSS：

.login-box {
　　margin-top: 14px;
　　padding-top: 14px;
}

注：#{}语法并不是随处可用，你也不能在 mixin 中调用，可以使用 @extend 中使用插值。

23.数据类型：
（1）数字
（2）字符串
分为有引号字符串和无引号字符串。使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串。
（3）颜色
（4）布尔值
（5）空值
（6）值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。
nth函数（nth function） 可以直接访问值列表中的某一项；
join函数（join function） 可以将多个值列表连结在一起；
append函数（append function） 可以在值列表中添加值；
@each规则（@each rule） 则能够给值列表中的每个项目添加样式。

运算
24.加法：在变量或属性中都可以做加法运算。
25.减法：

$full-width: 960px;
$sidebar-width: 200px;

.content {
　　width: $full-width - $sidebar-width;
}

//编译出来的 CSS 如下：
.content {
　　width: 760px;
}

26.乘法：
如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。
例如：

.box {
　　width: 10px * 2;
}
//而不是：
.box {
　　width:10px * 2px; 
}

27.除法：

.box {
　　width: (100px / 2); 
}

单独运算时，一定要加小括号；若/在已有的数学表达式中，不用加小括号也会自动识别为除法。

注：以上四种运算，单位不同可能会报错。

28.变量计算：

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container {
　　width: $content-width + $sidebar-width + $gutter;
　　margin: 0 auto;
}

//编译出来的CSS
.container {
　　width: 960px;
　　margin: 0 auto;
}

29.数字运算：

.box {
　　width: ((220px + 720px) - 11 * 20 ) / 12 ; 
}

//编译出来的 CSS:
.box {
　　width: 60px;
}

30.颜色运算：

p {
　　color: #010203 + #040506;
}
//计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：
//如此编译出来的 CSS 为：

p {
　　color: #050709;
}

//算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：
p {
　　color: #010203 * 2;
}
//计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：
p {
　　color: #020406;
}

31.字符运算：

$content: "Hello" + "" + "Sass!";
.box:before {
　　content: " #{$content} ";
}
//编译出来的CSS：
.box:before {
　　content: " Hello Sass! ";
}

//或者：
div {
　　cursor: e + -resize;
}
//编译出来的CSS:
div {
　　cursor: e-resize;
}

 

注：如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。