SASS的简单介绍

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天

安装 sass 环境

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

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

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

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

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

编译 sass

• 有了全局的 sass 环境以后

• 我们就可以对 sass 的文件进行编译了

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

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

• .scss 文件

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

• .sass 文件

  h1
      width: 100px
      height: 200px
  

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

• 因为 .sass 我们写不习惯，当然，如果你能写习惯也比较好用

• 我们先不管里面的的什么内容，这个 .scss 或者 .sass 文件浏览器就不认识

• 我们就要用指令把这两种文件变成 css 文件

  # 把 index.scss 编译，输出成 index.css
  $ 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 文件夹中不会自动删除，需要我们自己手动删除

sass 语法

• 我们能编译 sass 文件了，接下来我们就该学习一下 sass 的语法了
• 为什么他这么强大，这么好用，都是靠强大的语法
• .sass 和 .scss 文件的语法是一样的，只不过区别就是 {} 和 ;

变量

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

• 使用 $ 来定义变量

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

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

• 我们也可以在规则块内定义私有变量

  h1 {
      // 这个 $w 变量只能在 h1 这个规则块中使用
      $w: 100px;
      width: $w;
  }
  

嵌套

• sass 里面我们最长用到的就是嵌套了

• 而且相当的好用

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

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

  ul {
      width: 100px;
  ​
      li {
          width: 90px;
  ​
          div {
              width: 80px;
  ​
              p {
                  width: 70px;
  ​
                  span: {
                      color: red;
                  }
              }
          }
      }
  }
  

嵌套中的 &

• 在嵌套中还有一个标识符是 & 我们可以使用

• 先来看一个例子

  div {
      width: 100px;
      height: 100px;
  ​
      :hover {
          width: 200px;
      }
  }
  ​
  // 我想的是 div 被鼠标悬停的时候 width 变成 200
  // 但是编译结果却是
  div {
      width: 100px;
      height: 100px;
  }
  div :hover {
      width: 200px;
  }
  

• 和预想的结果不一样了

• 这个时候就要用到 & 来连接了

  div {
      width: 100px;
      height: 100px;
  ​
      &:hover {
          width: 200px;
      }
  }
  ​
  // 编译结果
  div {
      width: 100px;
      height: 100px;
  }
  div:hover {
      width: 200px;
  }
  

• 这个时候就和我需要的一样了

群组嵌套

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

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

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

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

嵌套属性

• 在 scss 里面还有一种特殊的嵌套

• 叫做 属性嵌套

• 和选择器嵌套不一样，是写属性的时候使用的

  div {
      border: {
          style: solid;
          width: 10px;
          color: pink;
      }
  }
  ​
  // 编译结果
  div {
      border-style: solid;
      border-width: 10px;
      border-color: pink;
  }
  

• 这个属性嵌套还可以有一些特殊使用

  div {
      border: 1px solid #333 {
          bottom: none;
      }
  }
  ​
  // 编译结果
  div {
      border: 1px solid #333;
      border-bottom: none;
  }