Sass 入门指南

CSS不是一种编程语言，你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。再程序员眼里，CSS 是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。

Sass是一种CSS预处理器。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

安装

Sass是Ruby语言写的，但是两者的语法没有关系。所以要先安装 Ruby。官网建议安装 2.2.X 版本。

安装好后，找到Ruby的Command, 或Terminal，打开输入 gem install sass。

查看是否安装成功，输入sass -v，如果返回一个版本信息，说明安装成功。

维护Sass的团队会不断的添加新的功能，输入gem update sass就会更新到最新版。

出现该图表示是最新版本。

需要卸载删除Sass的话输入gem uninstall sass就可以了，这里就不截图了。

使用

sass 有两种后缀文件名：一种为sass，该后缀在书写时不使用大括号和分号；另一种是scss文件，这种和我们平时写的 css 文件格式差不多，使用大括号和分号。这里主要讲scss，因为带括号和分号的写法看着更为舒服，sass后缀有严格的格式要求，极易报错。

最后引入页面<link>的还是 CSS 文件，这时候就需要把 scss 编译成 css 文件，我选择的是 PhpStorm/WebStorm 的 File Watcher 功能，如何使用这里就不详细说了。

基本语法

变量

SASS 允许使用变量，所有变量以 $ 开头。

$nav-color: #F90;
nav {
    $width: 100px;
    width: $width;
    color: $nav-color;
}

//编译后

nav {
    width: 100px;
    color: #F90;
}

在声明变量时，变量值也可以引用其他变量。

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
    border: $highlight-border;
}

//编译后

.selected {
    border: 1px solid #F90;
}

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

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

Sass中的中划线和下划线相互兼容，也就是说$highlight-color和$highlight_color是一样的。

计算功能

Sass允许在代码中使用算式：

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

嵌套

Sass允许在选择器嵌套。比如，下面的CSS代码：

div h1 {
    color : red;
}

可以写成：

div {
    h1 {
        color: red;
    }
}

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

p {
    border: {
        color: red;
    }
}

属性进行嵌套也可以减少很多重复性的工作，这里需要注意border后必须加上冒号。

在嵌套类似于:hover的伪类时，要在前加上父选择器标识符&:

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

同时父选择器标识符还有另外一种用法，你可以在父选择器标识符之前添加选择器：

#content aside {
    color: red;
    body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

注释

有两种注释。一种是标准的CSS注释/* 注释 */，该注释会保留到编译后的文件。另一种时单行注释// 注释，只保留在Sass源文件中，编译后会被省略。

代码的重用

继承

Sass允许一个选择器，继承另一个选择器。比如，现有class1：

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

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

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

Mixin(混合器)

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

@mixin rounded-corners {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

使用@include, 调用这个 mixin 定义的代码块。

notice {
    background-color: green;
    border: 2px solid #00aa00;
    @include rounded-corners;
}

//sass最终生成：

.notice {
    background-color: green;
    border: 2px solid #00aa00;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

混合器还可以传参数：

@mixin link-colors($normal, $hover, $visited) {
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited; }
}

当@include调用混合器时，你可以把它当作一个css函数来传参：

a {
    @include link-colors(blue,red,green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

插入文件

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

@import "path/filename.scss";

默认变量值

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值：

$link-color: blue;
$link-color: red;
a {
    color: $link-color;
}

//编译后

a {
    color: red;
}

在有些时候，你通过@import导入Sass文件作为默认样式，但是你想不通过覆盖的方法修改这个默认值，这个时候就要时候!default。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

转自 Sass 入门指南，SASS 中文网，SASS 用法指南