最全的Sass简单入门教程

SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复，节省时间。 它是更稳定和强大的CSS扩展语言描述文档的风格结构。sass中文网

而且Sass算是CSS的超集，它100%兼容CSS的语法，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。换个说法也就是：如果你喜欢，可以在Sass文件中完全以CSS的语法来写代码，它也是完全支持的。

SASS程序有3种使用方式：

1
2
3
作为命令行工具
作为独立的Ruby模块
作为任何Rack-enabled的框架(包括Ruby on Rails和Merb)的插件

Sass安装

Sass的安装分为2步：

1. 1. 安装Ruby，sass程序基于Ruby所以需要先安装Ruby
2. 2. 安装Sass程序

安装Ruby

从Ruby官网下载对应你电脑版本的安装包，然后按照步骤一步一步安装到你的电脑上（安装过程中记得勾选Add Ruby executablesto your PATH，免去安装后再去配置的烦恼）。完成安装后，在你的命令行程序中输入 ruby -v验证是否安装成功：

1
2
ruby -v #验证版本号
#ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]

如果出现对应的版本号说明安装成功，那么你就可以进行下面的操作了。

安装Sass

安装完Ruby后，打开命令行工具，输入以下命令安装sass程序：

1
2
gem install sass #gem是Ruby命令
sass -v #验证sass是否安装成功

如果打印出版本号，说明我们安装成功！

上述是一种官方安装的方法，有时候官方提供的安装方式可能是最简洁的，但也有可能不是最快速的，所以下面介绍另外一种镜像安装，速度会相对快一些：

1
2
3
4
5
gem sources --remove #移除自带源
gem sources -a https://gems.ruby-china.org/ #安装RubyChina的源
gem sources -l #查看当前的源
gem install sass
sass -v

Sass编译

所有准备工作完成后，就可以开始sass的编译。

编辑sass文件

打开编辑器，首先创建一个index.scss文件，然后保存好，内容如下：

index.scss文件

1
2
3
4
5
6
7
8
$color:yellow;
$font:18px;
$background:red;
body {
color:$color;
background:$background;
font-size:$font;
}

生成css文件（命令行版）

打开命令行工具，切换到index.scss文件所在目录，执行以下命令：

1
2
3
sass index.scss index.css
#把名为index的Sass文件转换为CSS文件。
#每次有更新保存之后，都需要执行这个命令。

为了更方便操作，我们可以监听这个文件，然后就省去了每次保存都要重新生成的麻烦。

1
2
sass --watch index.scss:index.css
#`--watch`参数加上之后，可以监测index这个文件的变化，更新保存之后自动编译。

多文件（文件夹）监听命令：

1
2
sass --watch sass/main:dist/css
#监视sass目录下main文件夹中的所有Sass文件，并自动编译为CSS文件之后，放到dist/css目录下。

逆向操作，css文件转换为sass/scss文件：

1
2
sass-convert index.css index.sass
sass-convert index.css index.scss

生成css文件（编辑器版）

有些人可能就觉得上面的命令操作有些繁琐，有没有更简便的方法呢，答案是肯定的，毕竟能人太多。我们可以通过编辑器插件的方式，自动编译成css文件。

作为一个前端开发，我经常用到的编辑器就是sublime text，然而sublime中就有两个比较好用的sass编辑插件：Sass（Sass语法高亮）和Sass Build（编译）。非常之好用。如果不知道具体的插件安装方法，请自行百度，节约时间，就是在珍惜生命！

完成好scss文件后，保存，快捷键Ctrl+B，就会在同一个文件夹里面生成对应的css文件和css.map文件。是不是省略了很多麻烦（就是这么任性）。

编译结果

上面两种方式都可以生成对应的css文件，生成的css文件如下：

index.css

1
2
3
4
5
6
body{
color:#ff0;
background:red;
font-size:18px
}
/*# sourceMappingURL=index.css.map */

可以看到生成的css文件只包含CSS代码，Sass源文件中设置的变量已经被处理了。

/*# sourceMappingURL=styles.css.map */`表示映射文件是styles.css.map，映射文件记录了源文件到css文件的映射信息。

sass@import导入

sass提供导入机制，可以将页面的共用较为通用的scss提取出来，这样方便维护，其他页面按需导入相关的scss文件，避免了所有的样式都在一个样式文件中，一个样式文件较为繁重难以维护。

scss文件中引入scss文件

css3的@import，在css样式表之中使用绝对或相对地址指定导入的外部样式表文件。
如：@import url(“style/index.css”)；css3中的@import可能会造成延迟加载，有的地方没有样式。

sass @import解决了这个问题，它能将多个scss合并为一个。
如：@import “index.scss”。

index.scss文件中导入index2.scss文件

1
2
3
4
5
6
7
8
9
10
11
12
#index.scss文件
$color:yellow;
$font:18px;
$background:red;
@import 'index2.scss';
body {
color:$color;
background:$background;
font-size:$font;
width: $width;
height:$height;
}
1
2
3
4
5
6
#index2.scss文件
$width:100px;
$height:100px;
body{
font-family:"Times New Roman",Georgia,Serif;
}
1
2
3
4
5
6
7
8
9
10
11
12
/*生成后的index.css文件*/
body{
font-family:"Times New Roman",Georgia,Serif
}
body{
color:#ff0;
background:red;
font-size:18px;
width:100px;
height:100px
}
/*# sourceMappingURL=index.css.map */

用法：可以在被引入的文件中定义默认值，主文件@import这个文件后，如果主文件中变量有定义，就不会被覆盖。

sass入门用法

语法与注释

1
2
3
4
5
6
7
Sass中的注释有3种：
//我是单行注释
不会出现在编译之后任何格式的CSS文件中。
/*我是多行注释*/
只会出现在编译之后代码格式为expanded的CSS文件中。
/*!我是强制注释*/
会出现在任何代码格式的CSS文件中。
1
2
3
4
5
6
7
8
//使用大括号的方式布局，类似于css
body {
color:red;
background:#fff;
}
div{
}

变量和嵌套

变量是Sass中最基本的语法。凡是css属性的标准值（比如说1px或者bold）可存在的地方，都可以替换为变量。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
通过 $ 符号来定义，通过变量名称实现多处重复引用。（注：变量名中连字符和下划线等效，$primary_color与$primary-color是同一个变量）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$color:yellow; //定义变量
$font:18px; //定义变量
$background:red; //定义变量
body {
$width:180px; //定义局部变量
$header-color: orange !global; //可以在选择器中使用 !global 标志定义全局变量。
color:$color; //引用变量
background:$background; //引用变量
font-size:$font; //引用变量
border:1px solid $color; //多个属性值时引用变量
width:$width; //引用变量
}
div{
color:$header-color;
}
//编译成css文件
body {
color:yellow;
background:red;
font-size:18px;
border:1px solid yellow;
width:180px;
}
div{
color:orange;
}

sass可以嵌套设置样式，这样比css方便了很多：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div{
p{
color:$color;
a{
font-size:$font;
}
}
span{font-size:$font;}
}
//编译成css文件
div p{color:yellow;}
div p a{font-size:18px;}
div span{font-size:18px;}

大多数情况下上面那种简单的嵌套都没问题。但如果你想要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符：

1
2
3
4
5
6
7
8
9
10
11
12
div {
p {
margin-bottom: 1.4px;
&:hover {
color: #999;
}
}
}
//编译成css文件
div p { margin-bottom: 1.4px; }
div p:hover { color: #999; }

Sass操作符（或运算符）包括加法、减法、除法、等号操作符等。

等号操作符

所有数据类型都支持等号运算符：

==等于!=不等于

除了等号运算符之外，每种数据类型还支持各自的一组操作符。

SassScript支持以下标准的算术操作符:

+加-减*乘/除%取模

算术运算符的一个常见用法是宽度计算。

例如，下面的例子计算宽度百分比：

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
width: 100%;
}
article {
float: left;
width: 700px / 960px * 100%;
}
.sidebar {
float: right;
width: 200px / 960px * 100%;
}

经过编译输出以下CSS代码：

1
2
3
4
5
6
7
8
9
10
.container {
width: 100%; }
article {
float: left;
width: 72.91667%; }
.sidebar {
float: right;
width: 20.83333%; }

使用算术操作符时，参与运算的数据单位必须相同。否则会报错(例如，一个用px，另一个用em)：

1
2
3
4
.box-big {
font-size: 22px + 4em; // Error: Incompatible units: 'em' and 'px'.
width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
}

颜色操作符

算术操作符也适用于颜色。计算颜色时，参与运算的是R, G, B分量，而不是整个六位数颜色值。

例如，当把两个十六进制颜色值相加时，将依次把每一对分量值相加。

示例：

1
2
3
body {
color: #991100 + #002299;
}

经过编译输出以下CSS代码：

1
2
body {
color: #993399; }

还可以对颜色和数字应用运算符。例如

1
2
3
body {
color: #112233 * 2;
}

经过编译输出以下CSS代码：

1
2
body {
color: #224466; }

写到这里，无不感慨sass的强大以及技术发展的迅速。到这里入门sass也绰绰有余了。后续会有进阶文章继续！