SASS使用指南（二）sass 语法

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

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;
  }
  

混入

• 也叫 混合器

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

  // 定义一个混合器使用  @mixin 关键字
  @mixin radius {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border-radius: 10px;
  }
  

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

• 他是不会被编译的，只有当你使用了他以后，才会被编译

  // 使用混合器使用 @include 关键字
  div {
      width: 100px;
      height: 100px;
  
      @include radius;
  }
  

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

• 编译结果

  div {
      width: 100px;
      height: 100px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border-radius: 10px;
  }