sass 笔记
Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。
Sass 实例
/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* 使用变量 */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
为什么使用 Sass?
CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。
Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 是如何工作的？
浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。
在命令行输入下面命令，即将 .scss 文件转化的 css 代码：
$ sass runoob-test.scss
我们可以在后面再跟一个 .css 文件名，将代码保存到文件中：
$ sass runoob-test.scss runoob-test.css
这是会在当前目录下生成 runoob-test.css 文件，代码如下：
@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {
background-color: lightblue;
color: darkblue;
font-size: 18px;
}
/*# sourceMappingURL=runoob-test.css.map */
其实就是变量进行了替换。
Sass 变量
变量用于存储一些信息，它可以重复使用。
Sass 变量可以存储以下信息：
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
Sass 变量使用 $ 符号：
$variablename: value;
Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。
$myColor: red;
h1 {
$myColor: green; // 只在 h1 里头有用，局部作用域
color: $myColor;
}
p {
color: $myColor;
}
当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的：
$myColor: red;
h1 {
$myColor: green !global; // 全局作用域
color: $myColor;
}
注意：所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。
Sass 嵌套规则与属性
Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
实例中，ul, li, 和 a 选择器都嵌套在 nav 选择器中
将以上代码转换为 CSS 代码，如下所示：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
属性也能嵌套
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
嵌套复杂例子
在Sass中，可以使用类或者id选择器进行嵌套。下面是一个示例：
.container {
#header {
background-color: red;
.logo {
float: left;
}
#nav {
ul {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
color: #fff;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
#content {
background-color: blue;
}
#footer {
background-color: green;
}
}
在这个示例中，使用了id选择器#header、类选择器.logo和嵌套的类选择器.container #header .logo等。
HTML应该是这样的：
<div class="container">
<div id="header">
<div class="logo"></div>
<div id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
转换成CSS代码如下：
.container #header {
background-color: red;
}
.container #header .logo {
float: left;
}
.container #header #nav ul {
list-style: none;
}
.container #header #nav ul li {
display: inline-block;
}
.container #header #nav ul li a {
text-decoration: none;
color: #fff;
}
.container #header #nav ul li a:hover {
text-decoration: underline;
}
.container #content {
background-color: blue;
}
.container #footer {
background-color: green;
}
指令
@import
引入其它 scss 文件
@minin 和@include
@mixin 定义混入，作用在选择器上，混入上会有各种 css 属性定义，定义后，其它地方@include 可以把混入的属性继承过来。
混入还支持参数，像函数一样。
@extend
继承另一个选择器的属性。