用途

Sass是CSS的辅助工具，它在CSS语法的基础上增加了变量、嵌套、混合、导入、属性/颜色运算等高级功能，有助于更好地组织管理样式文件，以及更高效地开发项目。

安装与使用

安装

• 推荐node-sass

  node install -g sass

• 如果是macOS用户也可以用brew安装:

  brew install sass/sass/sass

使用

1. 原生使用

   sass input.scss output.css --watch

   --watch: 当源文件发生变化时执行编译

2. 集成到Vue

   npm install sass 

   <template>
     <!-- 您的模板代码 -->
   </template>
   
   <script>
     // 您的脚本代码
   </script>
   
   <style scoped lang="scss">
     /* 您的 SCSS 代码 */
   </style>  

语法(SCSS)

嵌套规则(Nested Rules)

1. 基础使用

   #main p {
     color: #00ff00;
     width: 97%;
   
     .redbox {
       background-color: #ff0000;
       color: #000000;
     }
   }

2. 父选择器

   a {
     font-weight: bold;
     text-decoration: none;
     &:hover { text-decoration: underline; }
     body.firefox & { font-weight: normal; }
   }

3. 属性嵌套

   .funky {
     font: {
       family: fantasy;
       size: 30em;
       weight: bold;
     }
   }

4. 占位符选择器%foo(@extend中调用)

注释

1. /* */会被编译到css, //则会被忽略
2. 多行注释中也可以使用变量

   $version: "1.2.3";
   /* This CSS is generated by My Snazzy Framework version #{$version}. */

SassScript

1. 变量
   1. 定义与调用

      $width: 5em;
      #main {
        width: $width;
      }

   2. 作用域为块级作用域，但可以通过!global声明将局部变量转化为全局变量:

      #main {
        $width: 5em !global;
        width: $width;
      }
      #sidebar {
        width: $width;
      }

2. 数据类型

   • 数字: 1, 13, 10px
   • 字符串: "foo", 'bar', baz
   • 颜色: blue, #04a3f9, rgba(255,0,0,0.5)
   • 布尔型: true, false
   • 空值: null
   • 数组: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif

   • maps: (key1: value1, key2: value2)

   • 字符串: 在编译CSS文件时不会改变其类型(保持原本的引号)。只有在使用#{}时，有引号字符串将被编译为无引号字符串，这样便于在mixin中引用选择器名

   • 数组:
     • 独立的值也被视为数组 —— 只包含一个值的数组
   • 运算
   • 插值语句: #{}
   • 当前选择器: &
   • 默认值: !default

@-Rules与指令

1. @import
2. @media
3. @extend

控制指令

1. @if
2. @for

   @for $i from 1 through 3 {
     .item-#{$i} { width: 2em * $i; }
   }

3. @each
4. @while

混合指令(Mixin)

@mixin, @include

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

函数

@function function-name($args) { 
    @return value-to-be-returned;
}
p { 
    font-size: function-name($args); 
}

参考

• Sass中文文档