本文源自 Learn sass in Minutes。

一、介绍

Sass 是一种 CSS 扩展语言，在原生 CSS 语法基础上，增加了变量、嵌套、混入（mixins）等特性。它让 CSS 代码的编写维护更方便。

Sass 支持两种语法：

SCSS，和原生 CSS 语法一样，只不过增加了新特性。
SASS，使用缩进代替花括号，这是 Sass 最早支持的语法。

本文使用 SCSS 语法编写。

二、环境配置

# 全局安装 sass
$ npm install -g sass

# 将 input.scss 编译为 output.css
$ sass input.scss output.css

# 监听 input.scss 变化，实时编译为 output.css
$ sass -w input.scss output.css

# 查看帮助
$ sass --help

三、代码示例

// 在编译后的 CSS 文件中，单行注释将被忽略

/* 多行注释会保留 */

/* 引入数学模块，使用其中的 math.div() 函数 */
@use 'sass:math';

/* 变量
========== */

/* 可以使用 '$' 符号创建变量，存储 CSS 值（比如颜色） */
$primary-color: #a3a4ff;
$secondary-color: #51527f;
$body-font: 'Roboto', sans-serif;

/* 可以在整个样式表中使用变量。
当需要调整颜色，只改动一处就好。 */
body {
    background-color: $primary-color;
    color: $secondary-color;
    font-family: $body-font;
}

/* 控制指令
========== */

/* Sass 的 @if, @else, @for, @while 和 @each 可以控制编译逻辑 */

/* @if/@else 条件语句 */

$debug: true !default;
@mixin debugmode {
    @if $debug {
        @debug 'Debug mode enabled';
        display: inline-block;
    } @else {
        display: none;
    }
}

.info {
    @include debugmode;
}

/* @for 循环可以遍历数值集合。有两种格式："through" 和 "to"，
前者包含结束值，后者不含结束值 */
@for $c from 1 to 4 {
    div:nth-of-type(#{$c}) {
        left: math.div(($c - 1) * 900, 3);
    }
}

@for $c from 1 through 3 {
    .myclass-#{$c} {
        $channel: math.div($c * 255, 3);
        color: rgb($channel, $channel, $channel);
    }
}

/* @while 循环 */
$columns: 4;
$column-width: 80px;

@while $columns > 0 {
    .col-#{$columns} {
        width: $column-width;
        left: $column-width * ($columns - 1);
    }

    $columns: $columns - 1;
}

/* @each 函数类似 @for 指令，只是使用了一个列表。列表以空格分隔 */
$social-links: facebook twitter linkedin reddit;

.social-links {
    @each $sm in $social-links {
        .icon-#{$sm} {
            background-image: url('images/#{$sm}.png');
        }
    }
}

/* Mixins
========== */

/* 如果你发现同样的元素经常重复出现，可以考虑用 mixin 简化写法

使用 @mixin 指令，后面跟着 mixin 名*/

@mixin center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

/* 使用 @include 导入 mixin */
div {
    @include center;
    background-color: $primary-color;
}

/* 可以使用 mixin 简化属性写法 */
@mixin size($width, $height) {
    width: $width;
    height: $height;
}

/* 使用时传入宽高尺寸即可 */
.rectangle {
    @include size(100px, 60px);
}

.square {
    @include size(40px, 40px);
}

/* 函数
========== */

/* Sass 提供了一些函数，比如下面的 round() 和 fade_out() */
body {
    width: round(10.25px);
}

.footer {
    background-color: fade_out(#000000, 0.25);
}

/* 也可以自定义函数。函数和 mixin 看着很像。当不清楚选择函数，
或是 mixin 时，记住 mixin 通常用于生成 CSS 代码，而函数通常
用于逻辑复用 */

/* 如下函数会根据目标尺寸和父元素尺寸，计算得到百分比 */
@function calculate-percentage($target-size, $parent-size) {
    @return math.div($target-size, $parent-size) * 100%;
}

$main-content: calculate-percentage(600px, 960px);

.main-content {
    width: $main-content;
}

.sidebar {
    width: calculate-percentage(300px, 960px);
}

/* 扩展（继承）
=============== */

/* 通过扩展，可以在两个选择符间共享属性 */

.display {
    @include size(5em, 5em);
    border: 5px solid $secondary-color;
}

.display-success {
    @extend .display;
    border-color: #22df56;
}

/* 通常认为扩展优于 mixnin，因为扩展生成的代码更紧凑 */

/* 嵌套
========== */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: #ff0000;

        &:hover {
            background-color: blue;
        }

        a {
            color: white;
        }
    }
}

/* 片段和导入
=============== */

/* Sass 允许你创建片段文件。可以帮助你保持 Sass 代码模块化。片段
文件应该以 '_' 开头，比如 _reset.css。 */

html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

/* Sass 提供的 @import 指令，可以导入其他片段文件，合并为一个文件 */
@import 'reset';

body {
    font-size: 16px;
    font-family: Helvetica, Arial, Sans-serif;
}

/* 占位符选择器
=============== */

/* 占位符选择器以 '%' 开头，通常与扩展 @extend 结合。
占位符选择器不会出现最终的 CSS 中 */
%content-window {
    font-size: 14px;
    padding: 10px;
    color: #000;
    border-radius: 4px;
}

.message-window {
    @extend %content-window;
    background-color: #0000ff;
}

Sass 快速上手

一、介绍

二、环境配置

三、代码示例