Sass、Scss 用法指南

1. 简介

Sass 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。

Sass 支持两种不同的语法，两种语法可以互相加载。

Scss 语法使用 .scss 文件扩展名。除了极少部分的例外，它是 CSS 的超集，也就是说所有有效的 CSS 也同样都是有效的 Scss。由于其与 CSS 的相似性，它是最容易上手的语法，也是最流行的语法。
缩进语法是 Sass 的原始语法，因此它使用文件扩展名 .sass。由于这个扩展名的原因，这种语法有时直接被称为「Sass」。缩进语法支持与 Scss 相同的所有特性，但是它使用缩进而不是花括号和分号来描述文档的格式。

2. 基本用法

2.1 变量

变量以 $ 开头。

$blue: #1875e7;

div {
    color: $blue;
}

如果变量镶嵌在字符串中，必须要写在 #{} 之中。

$side: left;

.rounded {
    border-#{$side}-radius: 5px;
}

2.2 计算

进行计算：

body {
    margin: (14px / 2);
    top: 50px + 100px;
    right: $var * 10%;
}

2.3 嵌套

选择器可以嵌套。比如，下面的 CSS 代码：

div h1 {
    color : red;
}

可以写成：

div {
    hi {
        color:red;
    }
}

属性也可以嵌套，比如 border-color 属性，可以写成：

p {
    border: {
        color: red;
    }
}

注意，border 后面必须加上冒号。
在嵌套的代码块内，可以使用 & 引用父元素。比如 a:hover 伪类，可以写成：

a {
    &:hover {
        color: #ffb3ff;
    }
}

2.4 注释

Sass 共有两种注释风格。

标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在 Sass 源文件中，编译后被省略。

在 /* 后面加一个感叹号，表示这是「重要注释」。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
    重要注释！
*/

3. 代码重用

3.1 继承

选择器可以继承另一个选择器。比如，现有 class1：

.class1 {
    border: 1px solid #ddd;
}

class2 要继承 class1，就要使用 @extend 命令：

.class2 {
    @extend .class1;
    font-size:120%;
}

3.2 Mixin

Mixin 有点像 C 语言的宏（macro），是可以重用的代码块。

使用 @mixin 命令，定义一个代码块。

@mixin left {
    float: left;
    margin-left: 10px;
}

使用 @include 命令，调用这个 mixin。

div {
    @include left;
}

mixin 的强大之处，在于可以指定参数和缺省值。

@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}

使用的时候，根据需要加入参数：

div {
    @include left(20px);
}

下面是一个 mixin 的实例，用来生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

使用的时候，可以像下面这样调用：

#navbar li {
    @include rounded(top, left);
}
#footer {
    @include rounded(top, left, 5px);
}

3.3 颜色函数

Sass 提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

3.4 插入文件

@import 命令，用来插入外部文件。

@import "path/filename.scss";

如果插入的是 .css 文件，则等同于 CSS 的 import 命令。

4. 高级用法

4.1 条件语句

@if 可以用来判断：

p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
}

配套的还有 @else 命令：

@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}

4.2 循环语句

Sass 支持 for 循环：

@for $i from 1 to 10 {
    .border-#{$i} {
          border: #{$i}px solid blue;
    }
}

也支持 while 循环：

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

each 命令，作用与 for 类似：

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

4.3 自定义函数

允许用户编写自己的函数。

@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}

原文链接：Sass 用法指南