内容提要
- 变量
- 嵌套
- 占位符选择器 %
- @mixin
- 运算
- @if
- @for
- @each
- @extend
- @import
正文
1、变量
//定义变量：声明变量以$开
$baseColor:#ff9000;
//使用变量
.box{
font-size:12px;
color:$baseColor;
}
//若变量需要镶嵌在字符串中，变量写在#{$el}中
//如：margin-#{$el}:10px; //.box#{$el} {...}
$bgURL:‘../../../img/work/‘;
.box {
background-image: url(#{$bgURL}crumbs.png);
}
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global 声明：
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width; //5em
}可以在变量的结尾添加!default给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
//编译为
#main {
content: "First content";
new-content: "First time reference"; }2、嵌套
- 选择器嵌套
使用嵌套增强了结构性和可读性，可以用&表示父选择器（临近的最外层）。嵌套建议不超过3层以上；
.box{
color:red;
&:hover{ //相当于.box:hover{}
color:blue;
}
}
//& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器
#main {
color: black;
&-sidebar { //相当于 #main-sidebar {}
border: 1px solid;
}
}
- 属性嵌套
有些属性拥有同一个开始的单词，如：
.box{
border:{
color:red;
width:1px;
style:solid;
}
}
//编译为
.box{
border-color:red;
border-width:1px;
border-style:solid;
}3、占位符选择器 %
与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。
优势：不调用时不会有多余的css文件。
%fl{
float:left;
}
.box{
@extend %fl;
}4、@mixin
//定义
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
//使用
p { @include sexy-border(blue, 1px); }
//编译为
p {
border-color: blue;
border-width: 1px;
border-style: dashed; }
//也可使用参数个默认值
@mixin sexy-border($color, $width: 1px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2px); }
为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示
5、运算
- 数字运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。
- 字符串运算
+ 可用于连接字符串
注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
//编译为
p:before {
content: "Foo Bar";
font-family: sans-serif;
}如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
6、@if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
$type: 3;
p {
@if $type == 1 {
color: blue;
} @else if $type == 2 {
color: red;
} @else if $type == 3 {
color: green;
} @else {
color: black;
}
}
//结果
p { color: green; }@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。
7、@for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者@for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；。
@for $i from 1 through 3 { //1-3
.item-#{$i} { width: 2em * $i; }
}
@for $i from 1 to 3 { //1-2
.item-#{$i} { width: 2em * $i; }
}8、@each
@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而
//数组 list类型
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png‘);
}
}
.puma-icon {
background-image: url(‘/images/puma.png‘); }
.sea-slug-icon {
background-image: url(‘/images/sea-slug.png‘); }
.egret-icon {
background-image: url(‘/images/egret.png‘); }
.salamander-icon {
background-image: url(‘/images/salamander.png‘); }
//对象 maps类型
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；
9、@extend
功能：将一个选择器下的所有样式继承给另一个选择器。
.fl{
float:left;
}
.box{
width:200px;
@extend .fl;
}
//编译为
.box{
width:200px;
}
.fl,.box{
float:left;
}10、@import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
- 文件拓展名是 .css；
- 文件名以 http:// 开头；
- 文件名是 url()；
- @import 包含 media queries。
Sass 允许同时导入多个文件，例如同时导入base1 与 base2 两个文件：
@import "base1", "base2";
大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。
以上是对开发中常用sass的一些总结，更详细内容可移步 sass中文文档。
原文地址：https://www.cnblogs.com/adoctors/p/8835354.html