目录
为什么使用 Sass?
CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。 Sass 引入合理的样式 复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。 我们可以举个例子，我们会在 CSS 中重 复使用很多次十六进制的颜色代码，当有了变量之后，如果要改变颜色代码，只要修改变量的值就好了：
/* 定义颜色变量，要修改颜色值，修改这里就可以了 */
$primary_1: #a2b9bc;
/* 使用变量 */
.main-header {
background-color: $primary_1;
}
sass安装和编译
1. 一般选择NPM 安装方式。 npm install -g sass 全局安装sass。
2. 新建一个项目文件夹appsass
3. 新建一个index.html文件，代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="./main.css"></head>
</head>
<body>
<h1>hello sass!</h1>
</body>
</html5. 新建一个sass文件，main.scss，写入如下代码:
$bgcolor:red; // 声明变量
h1{
color: $bgcolor;
}
6. 把scss文件编译为css文件命令： sass main.scss main.css 运行此命令后，scss文件会被编译生成一个 main.css的文件，.css的文件浏览器才会识别。 编译后 一般会有一个.map的文件，map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个 位置，所对应的转换前的位置。
7. 单文件监听，监听单个sass文件变化，自动生成对应的.css文件。 sass --watch main.scss main.css
8. 监听文件夹,可以监听到某个文件夹下面的.scss文件变化，自动编译到输出文件夹。 sass --watch css:style 监听css目录下的.scss文件，编译文件放到style文件夹。
9. 注释 Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后 者则不会
sass的2种编译格式
新版的sass 只有2中编译方式。
1.default 编译排版格式 sass style.scss:style.css 编译过后样式
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
2.compressed 编译排版格式 命令行内容 sass style.scss:style.css --style compressed 编译过后样式 .box{width:300px;height:400px}.box-title{height:30px;line-height:30px} 不同的编译格式得到的代 码其实是一样的，只是排版格式不同，大家看情况去用。建议是，开发的时候用默认格式，比较清楚。当你需 要发布你的代码的时候，使用compressed格式，这个格式会让css文件相对较小。
Sass 变量
1. 变量用于存储一些信息，它可以重复使用。 Sass 变量可以存储以下信息：
字符串、数字、颜色值、布尔值、列表、null 值、Sass 变量使用 $ 符号：$variablename: value;
例：
$myFont: Helvetica, sans-serif; // 声明字体变量
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont; // 引入字体变量
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
2. Sass 作用域 Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标 签则是为 red。
$myColor: red;
h1 {
$myColor: green; // 只在 h1 里头有用，局部作用域
color: $myColor;
}
p {
color: $myColor;
}编译后：
h1 {
color: gre
最低0.47元/天 解锁文章
2055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
