CSS预编译：sass-scss

1 SCSS/SASS

两者在使用上，稍有不同， 主要体现在格式上，SCSS 的格式和 CSS 格式几乎一样，不局限于缩进，带有大括号，而 SASS 必须严格遵循缩进原则，并且没有大括号，使用上选择SCSS 更多点，需要注意的是两者不能混用，也就是说后缀名为 .scss 的书写规则就不能在其中使用 SASS 书写规则，否则会出现意想不到的错误，慎重选择。

这里主要以 SCSS 为主，原因很简单，更能接收点。

2 SASS 的安装

不管是 SCSS 还是 SASS 都可以通过 sass 命令来翻译等其他操作，由于sass 是基于 Ruby 实现的，所以在安装的时候直接输入 sudo apt-get install sass 的时候会提示使用 ruby-sass 进行安装，这个无所谓，它会自动帮助我们选择 ruby-sass 进行安装；

安装好之后使用 sass --version 查看下，如果能正确输出版本号，说明安装成功

3 使用 sass 命令

编译：

sass src.scss:dist.css

需要注意的是，源文件和目标文件是采用冒号（“：”）来隔开，如果想监听文件的变动，可以加上 --watch 参数

sass --watch src.scss:dist.css

这样一旦 src.scss 有变动，dist.css 文件就会实时发生变化。

还可以通过 sass --help 来查看更多相关的使用。

4 语法

4.1 变量声明

变量声明使用 ‘$’ 美元符号作为前缀来声明，并且还支持作用域，即可以定义全局和局部变量，两者定义方式，全局定义在整个文件范围，局部则是定义在大括号中的变量。

示例：

// test.scss

$bgColor: red;

body {
    background-color: $bgColor;
}

a {
    $mtop: 10px;

}

上面的 $bgColor 就是全局变量，再看 $mtop 就是局部变量，只在 a 标签中生效。

变量使用：很简单，直接通过 $var 使用即可，如上的背景色设置；

4.2 父选择器引用：&

通过 ‘&’ 符号可以在大括号内引用父选择器，从而做出更丰富的选择器操作，比如：

// test.scss

a {
    &:hover {
        color: red;
    }
}

上面示例中，相对第一层大括号内的选择器，a 标签就是父选择器，在里面使用 & 来引用，上面的代码实际上可以写成： a:hover { color: red; }

PS: & 和 @at-root 结合使用，将会有意想不到的结果出现，功能强大，组合形式多样。

4.3 选择器嵌套

选择器嵌套赋予了代码编写的灵活性，嵌套主要发生在父子及子孙选择器上，如下：

// test.scss

div {

    a {
        img {
            ....
        }
    }
}

上面的示例就类似： div a img { ... }

群组选择器嵌套，表示多个选择器包含同一种子选择器的时候，就可以使用群组嵌套，如下：

// test.scss

div, p {
    a {
        text-decoration: none;
    }
}

上面的意思是，在 div 和 p 元素下同时都有 a 链接标签，并且要求有共同的部分样式，实际上等同于如下写法：

div a, p a { text-decoration: none; }

另外还有一些其他类型的选择器，比如： 直接子选择器（>），相邻选择器（+），兄弟选择器（~）等等

sass 下嵌套写法，也都很简单：

// test.scss

div {

    > p {

        // 子选择器
    }

    ~ span {
        // 兄弟选择器，即跟在当前 div 后面的所有同级的 span 标签
    }

    + div {
        // 相邻选择器
    }
}

对应 css 格式，如下：

div > p {} ： 子标签 p，不包含孙子标签；

div ~ span {}： div 标签后面的所有同级标签 span；

div + div {}： div 后面的相邻的 div 标签。

4.4 混合器使用

混合器，类似于函数的使用，可以通过 @mixin 定义一样式块，然后在样式表中使用 @inclue 引用该样式块。

混合器可以带参数，也可以不带参数使用，但是建议需要参数的时候使用混合器，因为后面还有更好的替代方式来使用不带参数的情况，比如：继承和 % 形式。

混合器使用：

• 不带参数

  // test.scss
  
  @mixin set_bg {
       
  
      background-color: red;
      background-image: url(girl.png);
      background-size: 300px 300px;
  }
  
  // 引用
  
  div {
      @include set_bg;
  }

• 带参数

  // test.scss
  @mixin set_bg( $color, $img, $w, $h ) {
  
      background-color: $color;
      background-image: url($img);
      background-size: $w $h;
  }
  
  // 引用
  div {
      @include set_bg( red, '../../images/1.jpg', $width, $height );
  }
  

• 参数默认值

  // test.scss
  @mixin set_bg( $color:green, $img, $w:100px, $h:100px ) {
  
      background-color: $color;
      background-image: url($img);
      background-size: $w $h;
  }
  
  // 引用
  div {
      @include set_bg( red, '../../images/1.jpg', $width, $height );
  }
  

  如果设置了默认值，那么对应的参数可以不传，比如上例中的 $width 和 $height 就可以省略掉，在使用的时候可以直接写成：

  @include set_bg( red, '../../images/1.jpg' );

  但是如果没有设置默认值，还省略的话就会报错：

  

  因此在使用的时候务必要小心谨慎。

• &