Sass Basics

#Preprocessing

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

变量（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;
}

#Nesting

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

#Partials

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

#Modules

目前只有 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