Sass Basics

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

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

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

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

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

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

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

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

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }

还可以创建一些小的代码片段，包含在一个主 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;
    }

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

    .inverse {
      background-color: #333;
      color: white;
    }

Mixins Extend/Inheritance Operators