Sass Basics

Sass 这一预处理工具，能够帮助我写作更具健壮性、可维护的 CSS。

可通过 yarn global add sass 全局安装。之后可以在 Terminal 执行：

1    # compile one file
2    sass input.scss output.css
3    # watch individual files or directories
4    sass --watch input.scss output.css
5    # watch input folder and ouput folder
6    sass --watch app/sass:public/stylesheets

变量（Variables）可以存储需要重复使用的信息。

    $font-stack: Helvetica, sans-serif;
    $primary-color: #333;

    body {
      font: 100% $font-stack;
      color: $primary-color;
    }

1    body {
2      font: 100% Helvetica, sans-serif;
3      color: #333;
4    }

Sass 能够处理和 HTML 一样，写出嵌套的 CSS。但注意不要滥用。

    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      li { display: inline-block; }

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }

 1    nav ul {
 2      margin: 0;
 3      padding: 0;
 4      list-style: none;
 5    }
 6    nav li {
 7      display: inline-block;
 8    }
 9    nav a {
10      display: block;
11      padding: 6px 12px;
12      text-decoration: none;
13    }

还可以创建一些小的代码片段，包含在一个主 Sass 文件中。代码片段可视为模块化的组件。代码片段文件的命名： _filename.scss ，有了 _ 在编译时 不会生成 *.css 文件。在主 Sass 文件中，使用 @use 调用 partial 文件。

目前只有 Dart Sass 支持使用 @use 导入模块，其他分支（LibSass，Ruby Sass）需使用 @import rule ，后者已经不鼓励使用。

    // _base.scss
    $font-stack: Helvetica, sans-serif;
    $primary-color: #333;

    body {
      font: 100% $font-stack;
      color: $primary-color;
    }

    // styles.scss
    @use 'base';

    .inverse {
      background-color: base.$primary-color;
      color: white;
    }

1    body {
2      font: 100% Helvetica, sans-serif;
3      color: #333;
4    }
5
6    .inverse {
7      background-color: #333;
8      color: white;
9    }

Mixins Extend/Inheritance Operators