CSS预处理工具（sass，scss）

CSS预处理工具

一、什么是CSS预处理工具

CSS预处理工具是一种语言，用来为CSS增加一些编程的特性，无需考虑到浏览器的兼容性问题

例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言的一些基本技巧，可以让你的CSS更加简洁，适应性更强，代码更直观等诸多好处

二、三款CSS预处理工具

• less

  官网： http://lesscss.cn/

• stylus

  官网： https://stylus.bootcss.com

• sass(有两个版本sass和scss，scss是sass3引入的新的语法)

  官网： http://lesscss.cn/

三、安装sass环境

• 以前的sass 需要依赖一个ruby 的环境

• 现在的sass 需要依赖一个python 的环境

• 但是我们的node 强大了以后，我们只需要依赖node 环境也可以

• 需要我们使用npm 安装一个全局的sass 环境就可以了

  # 安装全局的sass环境
  $ npm i sass -g
  

四、编译sass

有了全局的sass 环境以后，我们就可以对sass 的文件进行编译了

sass 的文件后缀有两种，一种是 .sass 一种是 .scss

他们两个的区别就是有没有 {} 和 ;

• .scss文件

  h1{
      width:100px;
      height:100px;
  }
  

• .sass文件

  h1
  	width:100px
  	height:100px
  

• **我们比较常用的是 .scss 文件 **

🚩 我们可以用指令把这两种文件变成css文件

# 把index.scss文件编译输出成index.csswe文件
$ sass index.scss index.css

这样我们就得到了一个css文件，在页面里面引入css文件就可以了

五、实时编译

• 我们刚才的编译方式只能编译一次

• 当你修改了文件以后，要重新执行一遍指令才可以

• 实时编译就是随着你的文件的修改，自动重新编译成css文件

• 也是用指令来完成

  # 实时监控index.scss文件，只要发生修改就自动编译，并放在index.css文件里
  $ sass --watch index.scss:index.css
  

• 然后你只有修改index.scss文件的内容，index.css 文件的内容就会自动刷新

六、实时监控目录

• 之前的实时监控只能监控一个文件

• 但是我们有可能要写很多的文件

• 所以我们要准备一个文件夹，里面放的全部都是sass文件

• 实时的把里面的每一个文件都编译到css文件夹里面

• 依旧是使用指令的形式来完成

  # 实时监控sass这个目录，只要有变化，就会实时响应在css文件夹下
  $ sass --watch sass:css
  

• 这样你只要修改sass文件夹下的内容，就会实时响应在css文件夹中

• 你新添加一个文件也会实时响应

• 但是你删除一个文件，css文件夹中不会自动删除，需要我们自己手动删除

vscode插件让scss转css

安装Easy scss插件(注意：不能安装scss2css插件，会冲突报错)

当你scss文件有改动，插件会实时自动更新css文件

七、🚩 sass 语法

1.变量

• 定义一个变量，在后面的代码中可以使用

• 使用 $ 来定义变量

  //定义一个$c作为变量，值是红色
  $c:red;
  h1{
      //使用$c这个变量
      color: $c;
  }
  

• 上面定义的变量全局都可以使用

• 我们也可以定义在代码块中定义私有变量

  h1{
      //$w变量只有在h1这个代码块中使用
      $w:100px;
      width: $w;
  }
  

2.嵌套

• sass 里面最常用到的就是嵌套了，而且相当好用

  h1{
      width:100px;
      div{
          width:200px
      }
  }
  //编译结果
  h1{
      width:100px;
  }
  h1 div{
      width:200px;
  }
  

• 这个就是嵌套，理论上可以无限嵌套下去

  ul{
      width:100px;
      li{
          width:90px;
          div{
              height:100px;
              p{
                  color:red;
                  ....
              }
          }
      }
  }
  

3.嵌套中的&

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover {
      text-decoration: underline; 
    }
}
//编译为
a {
  font-weight: bold;
  text-decoration: none; 
}
  a:hover {
    text-decoration: underline; 
}

4.群组嵌套

• 群组嵌套就是多个标签同时嵌套

  div{
      width:100px;
      .box1, .box2 {
          color:red;
      }
  }
  //编译结果
  div{
      width:100px;
  }
  div .box1, div .box2{
      color:red;
  }
  

• 还有一种就是多个标签同时嵌套一个标签

  h1,h2,h3{
      width:100px;
      .box{
          color:red;
      }
  }
  //编译为
  h1,h2,h3{
      width:100px;
  }
  h1 .box,h2 .box, h3 .box{
      color: red;
  }
  

5.混入

也叫 混合器

其实就是定义一个 “函数” 在scss 文件中使用

//定义一个混合器使用 @mixin 关键字
@mixin radius{
    width:100px;
    height:100px;
}

• 上面是定义好的一个混合器

• 他是不会被编译的，只有当你使用的时候，才会被编译

  //使用混合器使用 @include 关键字
  div{
      @include radius;
      backgroun:red;
  }
  

• 这个就是把刚才的混合器拿过来使用

  //编译结果为
  div{
      width:100px;
      height:100px;
      background:red;
  }
  

6.混合器传参

• 既然说了混入器就像一个 “函数” 一样，那么就可以像函数一样传递参数

• 和函数的使用方式一样，在定义的时候是形参，在调用的时候是实参

  //定义混合器
  @mixin result($color,$size){
      color:$color;
      font-size:$size
  }
  

• 使用这个混合器的时候传递实参

  div{
      width:100px;
      height:100px;
      @include result(red,16px)
  }
  

• 编译结果

  div{
      width:100px;
      height:100px;
      color:red;
      font-size:16px;
  }
  

• 写了多少个形参，在调用的时候就要传递多少个实参，并且还要按照参数的顺序传递

7.参数默认值

• 我们在定义混合器的时候，也可以给一些参数传递一些默认值

• 这样，就可以不用传递实参了

  @mixin result($color:red,$size:16px){
      color:$color;
      font-size:$size;
  }
  

• 使用的时候，如果你不传递，那么就是使用的默认值

  div{
      width:100px;
      height:100px;
      //使用的时候，只传递一个，剩下的使用默认值
      @include result(pink)
  }
  //编译结果
  div{
      width:100px;
      height:100px;
      color:pink;
      font-size:16px;
  }
  

8.继承

• 在sass 里面使用继承可以大大的提高开发效率

• 继承很简单，就是把你之前写过的选择器里面的东西直接拿过来一份

  div{
      width:100px;
      height:100px
  }
  //box 继承div的样式
  .box{
      @extend div;
      color:red;
      font-size:16px;
  }
  
  //编译结果
  div, .box{
      width:100px;
      height:100px;
  }
  .box{
      color:red;
      font-size:16px;
  }
  

9.注释

在scss 文件中注释分为几种

1. 编译的时候不会被编译的注释

   //我是一个普通注释，在编译的时候，我就被过滤掉了
   

2. 编译的时候会被编译的注释

   /*我在编译的时候，会被一起编译过去*/
   

3. 强力注释

   /*!我是一个强力注释，不光编译的时候会被编译过去，将来压缩文件的时候也会存在*/
   

10.导入文件

我们刚学过了定义变量，定义混合器

这两个内容在定义过后，如果没有使用，是不会被编译出内容的

所以我们可以单独写一个文件，混合器写一个文件，然后直接导入使用

//定义变量的文件		variable.scss
$w:100px;
$h:100px;
$c:red;
//定义混合器的文件		mixin.scss
@mixin result($w,$h,$c){
    width:$w;
    height:$h;
    color:$c;
}

然后我们在主文件中，把这两个文件导进来就可以了

@import './variable.scss';
@import './mixin.scss';

div{
    @include result;
    width:$w;
    height:$h;
}
//编译结果
div{
    width:100px;
    height:100px;
    color:red;
}

11.条件

@if

当@if的表达式返回值不是false 或者 null 时，条件成立，输出{} 内的代码

div{
    @if 1+1==2{width:100px;}
    @if 5<3{width:200px;}
    @if null{width:300px;}
}
//编译为
div{
    width:100px;
}

有@if声明，那就有@else if声明，@else声明，语法和JavaScript一样

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//编译为
p {
  color: green; 
}

12.for循环

• @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
• 这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：
• 当使用 through 时，条件范围包含 与 的值，
• 而使用 to 时条件范围只包含 的值不包含 的值。
• 另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//编译为
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

更多语法参考官网

https://www.sass.hk/docs/