Sass - Learn Sass（官网）

官网：https://sass-lang.com/guide

# 安装
yarn global add sass

一、Preprocessing

Sass 工具可以把预处理的 Sass 文件转换成普通的 CSS 文件，然后在网站中使用，有下面 3 种用法

手动将 input.scss 编译输出成 output.css

sass input.scss output.css

监听 input.scss 文件变动，并在变化时自动编译输出成 output.css

sass --watch input.scss output.css

使用 app/sass 文件夹路径作为输入，public/stylesheets 作为 输出，中间用冒号分割，监听文件并输出到目录

sass --watch app/sass:public/stylesheets

二、Variables

可以在变量中存储颜色、字体或其他任何 CSS 值，并在将来重复利用，Sass 使用 $ 富豪作为变量的标志

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

三、Nesting

Sass 允许嵌套 CSS 选择器，但是不要过度嵌套，过度嵌套会导致 CSS 可能很难维护。下面是一个典型的网站导航的样式

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

ul、li 和 a 选择器嵌套在 nav 选择器中。这是组织 CSS 并使其更具可读性的好方法

四、Partials

可以创建部分 Sass 文件来模块化 CSS 使其更容易维护。什么意思呢？创建一个 _ 开头的 Sass 文件让 Sass 知道它是部分 Sass 文件，它不会生成 CSS 文件，然后别的正常的 Sass 文件对其进行引入。

_partial.scss

五、Modules

不必在一个文件中写所有的 Sass 文件，可以使用 @use 规则进行分割，这个规则可以将其他 Sass 作为一个模块加载进来，可以使用它的 variab✕les、mixins 和 functions，并且其中的 CSS 也引入进来了。

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
    font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';
.inverse {
    background-colr: base.$primary-color;
  color: white;
}

我们注意到使用 @use 引入其他 Sass 文件时，不需要加 .scss 后缀，_ 前缀也可以省略，Sass 会很聪明地处理它们。

六、Mixins

Mixins 的用法如下，可以感受感受

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

七、Extend/Inheritance

使用 @extend 可以将一组 CSS 继承下来，用法如下，感受感受

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}
.message {
  @extend %message-shared;
}
.success {
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
.warning {
  @extend %message-shared;
  border-color: yellow;
}

八、Operators

Sass 支持一些标准的数学运算符，例如 +、-、*、/ 和 %，用法如下，感受感受

.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

「@浪里淘沙的小法师」