sass整理

1.sass是什么？

        CSS的预处理语言，必须依赖于ruby脚本

2.要使用sass必须安装ruby

  注意环境变量的添加

3.安装ruby

1. 进入ruby的控制台（start command prompt with ruby）
2. gem install sass
3. 测试sass是否安装成功  sass -v

4.sass语法

  *.sass    旧的语法，没有{}，只能通过空格区分

  

编译：

sass   *.sass : *.css

  *.scss    新语法，

注意：与less不同的是使用$

单文件编译：

编译之后的CSS代码：

多文件编译：

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点及解决方法：

在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

GUI页面编译工具（koala）

[Sass]常见的编译错误

在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。

而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。

[Sass]声明变量

1. 声明变量的符号“$”
2. 变量名称
3. 赋予变量的值

 

默认变量

sass 的默认变量仅需要在值后面加上 !default 即可

body{
    line-height:2;
}

全局变量和局部变量

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

生成的CSS代码

[Sass]嵌套-属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。

与嵌套选择器相比：属性之后加了引号

[Sass]嵌套-伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。

生成的CSS代码

混合

1、声明混合宏

在 Sass 中，使用“@mixin”来声明一个混合宏，可以带参数，也可以不带参数

2、调用混合宏

在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏，声明带参数的混合宏之后在调用时，如果不传参默认的是使用默认的参数。

示例一：

生成的CSS代码

示例二：传一个不带参数的混合宏，一个带参数的混合宏

生成的CSS代码

有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代

生成的CSS代码如下：

继承

在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。

占位符 %placeholder

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

生成的CSS代码：

从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。

[Sass]混合宏 VS 继承 VS 占位符

混合宏

总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，

优点：可以传参

个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块

继承

使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多。

缺点：不能传参。

个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

占位符

编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。

[Sass]插值#{}

插值：  #{}

生成的CSS代码：

[Sass]注释

1.  //注释

2.  /* 注释*/

区别：前面在编译之后不会显示出来，但是后者会显示出来。

[Sass]数据类型

 Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：

•  数字: 如，1、 2、 13、 10px；
•  字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
•  颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
•  布尔型：如，true、 false；
•  空值：如，null；
•  值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

  Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）：

[Sass运算]加减乘除

注意：在使用除法的时候，如果有常数参与运算，需要使用（）将运算内容括起来。

案例一：

生成的CSS代码：

1. nth函数（nth function） 可以直接访问值列表中的某一项；
2. join函数（join function） 可以将多个值列表连结在一起；
3. append函数（append function） 可以在值列表中添加值； 
4. @each规则（@each rule） 则能够给值列表中的每个项目添加样式。

 案例二：

生成的CSS代码：