sass入门

编译

使用 sass --watch监控文件的改变，并对其进行实时编译
语法：

sass --watch input.sass:output.css // 表示监控input.sass的改变，并实时编译，输出为output.css
sass --watch input-dir:output-dir // 监控input-dir文件夹下的所有sass或scss文件的改变，并实时编译到output-dir文件夹下

gulp的自动化编译脚本

需要安装gulp和gulp-sass

  var gulp = require('gulp');
  var sass = require('gulp-sass');
  
  gulp.task = ('sass', function(){
    gulp.src('./scss/*.scss')
        .pipe(sass({outputStyle: 'expressed'}).on('error', sass.logError))
        .pipe(gulp.dest('./css'));
  });
  
  gulp.task('watch', function(){
    gulp.watch('scss/*.scss', ['sass']);
  });
  
  gulp.task('build-sass', ['sass', 'watch']);

.map文件

编译后生成的.map文件便于我们在浏览器中直接调试sass文件

常见的编译错误

除去编写sass的语法错误外，常见的编码错误有：

字符编码错误
在sass文件中将字符编码设置为: @charset "utf-8"
中文路径导致的错误
路径不要出现中文

编译后文件的输出风格

嵌套输出方式：nested
在编译时带上参数：--style nested
这种风格的大括号不占用一行
展开输出方式：expanded
在编译时带上参数：--style expanded
这种风格，大括号会另起一行
紧凑输出方式：compact
带上参数：--style compact
这种风格：单行css的形式
压缩输出方式：compressed
带上参数：--style compressed
这种风格：所有css在一行

语法

声明变量

sass的变量包含三个部分：

声明变量的符号 "$"
变量名称
赋予变量的值
如：

// 变量名为：width，值为：300px
$width: 300px; 

// 如果值后面加上 `!default` 表示默认值
$fontSize: 14px !default;

两种形式变量：

普通变量: 如：$width: 300px
默认变量：如：$fontSize: 14px !default
如果要覆盖默认变量，只需要在它的前面重新声明即可
```
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}
```

sass的变量有作用域
根据作用域的不同，分为：全局变量和局部变量

全局变量：定义在元素外部
局部变量: 定义在局部范围的变量，当局部变量与全局变量同名时，局部变量会覆盖全局变量

什么时候声明变量？
三个原则：

该值至少重复出现两次以上
该值至少可能会被更新一次
该值所有的表现都与变量有关（非巧合）

一个sass的在线编译器

嵌套-选择器嵌套

三种嵌套方式：

选择器嵌套
如：

nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}
转换为 css
nav a {
  color: red;
}
header nav a {
  color: green;
}

属性嵌套
有很多属性是有相同的前缀的，如：margin、padding、font等属性，可以像下面这样简写：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}
// 转换为css
.box {
  font-size: 12px;
  font-weight: bold;
}

伪类嵌套
与属性嵌套非常类似，只不过需要借助"&"符号一起配合使用，如：

.box{
  &:before {
    content:"伪元素嵌套";
  }
}
// 转换为css
.box:before{
  content: "伪元素嵌套";
}

混合宏

声明宏

不带参数混合宏
在sass中，使用"@mixin"来声明一个混合宏
如:

@mixin border-radius{
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

@mixin是用来申明混合宏的关键字，
border-radius是混合红的名称，
大括号里面是复用的样式代码

带参数混合宏
在声明宏时带参数

@mixin border-radius($radius: 5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

复杂的混合宏
可以在大括号里面带有逻辑关系
如：

  @if length($shadow) >= 1{
    @include prefixer(box-shadow, $shadow);
  } @else {
    $shadow: 0 0 4px rgba(0, 0, 0, .30;
    @include prefixer(box-shadow, $shadow);
}

注意：$shadown...中的...表示带有多个参数，当带有多个参数时，可以使用...来代替,
@include：表示调用混合宏

调用混合宏

sass中使用@mixin声明混合宏，使用@include调用混合宏
如:

// 声明一个border-radius 的混合宏
@mixin border-radius($radius: 5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

// 调用混合宏
button {
   @include border-radius;
}

编译出来的css：

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

混合宏的不足

最大的不足是：生成冗余的代码块
如：

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}

编译后的css:

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.box和.btn都调用了相同的内容，但是sass并未将其合并在一起，这便是混合宏最大的不足

扩展/继承

sass中的继承跟js中的继承类似，只不过它们继承的是样式，
sass中的继承通过@extend, 如下代码：

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

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

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译出来之后的css:

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

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

.btn-second {
  background-clor: orange;
  color: #fff;
}

通过继承便可以实现代码的复用，可以解决混合宏生成重复代码的问题

占位符 `%placeholder`

sass中的占位符功能很强大、很实用
使用占位符声明的代码块，如果没有被@extend调用，就不会生成CSS代码，
可以取代以前CSS中的基类造成的代码冗余的情况。
如：

%mt5 {
  margin-top: 5px;
}

%pt5 {
  padding-top: 5px;
}

上面这段代码没有被@extend引用，因此在编译时，不会生成冗余的CSS代码
如：

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

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

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译出来的CSS

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

从编译出来的CSS代码可以看出，通过@extend调用的占位符，
编译出来的代码会将相同的代码合并在一起，这就是我们需要的

混合宏 VS 继承 VS 占位符

关于什么时候该用哪种方式，往往很纠结，以下分析：

混合宏的使用

//SCSS中混合宏使用
@mixin mt($var){
  margin-top: $var;  
}

.block {
  @include mt(5px);

  span {
    display:block;
    @include mt(5px);
  }
}

.header {
  color: orange;
  @include mt(5px);

  span{
    display:block;
    @include mt(5px);
  }
}

编译出来：

.block {
  margin-top: 5px;
}
.block span {
  display: block;
  margin-top: 5px;
}

.header {
  color: orange;
  margin-top: 5px;
}
.header span {
  display: block;
  margin-top: 5px;
}

结论：从编译出来的css可以知道，使用混合宏时并不会合并相同的样式代码，造成代码的冗余，
但是它可以传递参数

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

sass中的继承
先上代码：

//SCSS 继承的运用
.mt{
  margin-top: 5px;  
}

.block {
  @extend .mt;

  span {
    display:block;
    @extend .mt;
  }
}

.header {
  color: orange;
  @extend .mt;

  span{
    display:block;
    @extend .mt;
  }
}

编译出来的css:


.mt, .block, .block span, .header, .header span {
  margin-top: 5px;
}

.block span {
  display: block;
}

.header {
  color: orange;
}
.header span {
  display: block;
}

总结：使用继承后，编译出来的CSS会将使用继承的代码块合并在一起，
通过组合选择器的方式展现, 相对于混合宏而言，要干净的多，但是，
继承不能传递参数

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

占位符
代码如下：

//SCSS中占位符的使用
%mt{
  margin-top: 5px;  
}

.block {
  @extend %mt;

  span {
    display:block;
    @extend %mt;
  }
}

.header {
  color: orange;
  @extend %mt;

  span{
    display:block;
    @extend %mt;
  }
}

编译后的代码：

.block, .block span, .header, .header span {
  margin-top: 5px;
}

.block span {
  display: block;
}

.header {
  color: orange;
}
.header span {
  display: block;
}

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

插值`#{}`

如下代码：

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

编译出来：

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

数据类型

字符串

有引号字符串
无引号字符串
在编译CSS文件时不会改变其类型。只有一种例外：
使用#{}插值语句时，有引号字符串将被编译为无引号字符串
如：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为：

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

值列表

值列表就是：使用空格或逗号分隔的一些列的值
如：

margin: 10px 15px 0 0 
//或
font-size: Helvetica, Arial, sans-serif

Sass列表函数赋予了值列表更多功能：
如：

nth函数：可以直接访问值列表中的某一项
join函数：可以将多个值列表串在一起
append函数：可以在值列表中添加值
@each函数：可以遍历值列表

运算

加法和减法运算

注意：在进行加减法运算时，如果单位不同，会出现报错

.box {
  width: 20px + 10px;
}

乘法运算

注意：乘法与加减法略有不同，当两个值的单位相同时，只需要写上一个单位，否则会报错
如：

.box {
  width: 10 * 2px;     // 只需要写一个单位即可
}

如果改为如下所示，会报错：

.box {
  width: 10px * 2px;  // 两个值都加上单位，会报错
}

除法运算

因为除法运算符 “/” 在CSS中有特殊含义，如设置字体时添加行高，
因此，如果出现以下几种情况，“/” 会被当做除法，如：

如果数值或它的任意部分是存储在一个变量中或是函数的返回值
如果数值被圆括号包围（如果需要进行除法运算，直接使用圆括号包围最为保险）
如果数值是另一个数学表达式的一部分
示例如下：

//scss
p {
  font: 10px/8px/         // 纯CSS, 不是除法运算
  $width: 1000px;
  width: $width / 2;      // 使用了变量，是除法运算
  width: round(1.5)/2;    // 使用了函数，是除法运算
  height: (500px / 2);    // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px;   // 使用了加（+）号，是除法运算
}

注意：当两个带有相同单位的数值进行除法运算时，最终会被编译为没有单位的css

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