Sass
sass runoob-test.scss runoob-test.css
Sass 变量可以存储以下信息：
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
Sass 变量使用 $ 符号：
$variablename: value;
以使用 !global 关键词来设置变量是全局的：$myColor: green !global; // 全局作用域
所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。
很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
@import filename;
如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。
但是，在导入语句中我们不需要添加下划线。
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。
@include 指令可用于包含一混入：
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
@extend .button-basic;
Sass 函数
https://www.runoob.com/sass/sass-functions.html
