CSS预处理器 —— Sass

sass的四种编译风格：

• nested：嵌套缩进的css代码，它是默认值。

• expanded：没有缩进的、扩展的css代码。

• compact：简洁格式的css代码（一种选择器的规则在单独一行）。

• compressed：压缩后的css代码。

1. 推荐国产免费图形编译工具 Koala
2. VScode扩展 Live Sass

"liveSassCompile.settings.formats":[
	// 扩展
    {
 //可定制的出口CSS样式（expanded，compact，compressed，nested）
 "format": "compact",
 "extensionName": ".min.css",//编译后缀名
 "savePath": null//编译保存的路径
    } 
],
"liveSassCompile.settings.excludeList": [
    "**/node_modules，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

​	将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。
​	插值语句 (interpolation) 也可写进多行注释中输出变量值：
$version: "1.2.3";

// 编译为


四、sassscript
​	在 CSS 属性的基础上 Sass 提供了一些名为 Sassscript 的新功能。 Sassscript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。
​	通过 interpolation，Sassscript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。
4.1 Interactive Shell
Interactive Shell 可以在命令行中测试 Sassscript 的功能。在命令行中输入 sass -i，然后输入想要测试的 Sassscript 查看输出结果：
$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

4.2 变量$
​	sass使用$符号来标识变量（老版本的sass使用!来标识变量。改成KaTeX parse error: Expected 'EOF', got '是' at position 1: 是̲多半因为`!highlight…highlight-color和KaTeX parse error: Expected 'EOF', got '。' at position 15: sidebar-width`。̲为什么选择`符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css`语法冲突。
1. 变量命名
​	sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线（使用中划线的方式更为普遍）。这两种用法fu相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着即使compass选择用中划线的命名方式，这并不影响你在使用compass的样式中用下划线的命名方式进行引用：
$link-color: blue;	// 中划线方式命名
a { color: $link_color; } // 可以通过 下划线 方式引用

//编译后
a { color: blue; }

​	注意：在sass中纯css部分不互通，比如类名、ID或属性名。
2. 变量声明
​	变量以美元符号开头，赋值方法与 CSS 属性的写法一样；
$highlight-color: #F90;
// 以空格分割的多个属性值
$basic-border: 1px solid black;
// 以逗号分割的多个属性值
$plain-font: Myriad,Helvetica,"Liberation Sans",Arial,sans-serif; 

任何可以用作css属性值的赋值都可以用作sass的变量值。
变量声明后还未生效，只有当变量被引用后才生效
在声明变量时，变量值也可以引用其他变量。
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;	// 声明变量时，变量值也可以引用其他变量
.selected {
  border: $highlight-border; // 当变量被引用后才生效
}
//编译后
.selected {border: 1px solid #F90;}

3. 变量引用
1. 凡是`css`属性的标准值可存在的地方，变量就可以使用。`css`生成时，变量会被它们的值所替代。
2. 变量可以修改，但一经修改，**所有**引用此变量的地方（**同一作用域**）生成的值**都会随之改变**
3. 如果变量要**镶嵌在字符串之中**，就必须需要写在 **`#{}`**之中，也就是后面要讲到的 **插值语句**

$side : top-left; 
.rounded { border-#{$side}-radius: 5px; }
// 编译后
.rounded { border-top-left-radius: 5px; }

4. 变量作用域
1. 全局作用域：不在嵌套规则内定义的变量则可在任何地方使用（嵌套规则外 -- 全局变量）
2. 块级作用域：嵌套规则内定义的变量只能在嵌套规则内使用（嵌套规则内 -- 局部变量）
3. 将局部变量转换为全局变量可以添加 `!global` 声明（嵌套规则内 -- 全局变量 -- $变量名: 变量值 !global;）

#main {
  $width: 5em !global; // 加了!global则$width变成了全局变量
  width: $width;
}
#sidebar {
  width: $width;
}

4.3 数据类型
Sassscript 支持 6 种主要的数据类型（变量的6中主要数据类型）：
数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 Javascript 的 object，(key1: value1, key2: value2)
Sassscript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串
1. 字符串
有引号字符串 (quoted strings) ：如 "Lucida Grande" 'Microsoft Yahei'；
无引号字符串 (unquoted strings)，如 sans-serif 、bold，在编译 CSS 文件时不会改变其类型
$font-family: 'Microsoft Yahei', sans-serif;	// 一个有引号字符串，一个无引号字符串
body {
    // 嵌套属性的写法
    font: 14px/24px { 
 family: $font-family;
    };
}
// 编译后. 可发现在编译css文件时不会改变字符串的类型
body { font: 14px/24px; font-family: "Microsoft Yahei", sans-serif; }

例外情况：使用 #{} (插值) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：
@mixin firefox-message($selector) {
    body.firefox #{$selector}:before {//会将传入的有引号字符串".header"编译成了无引号字符串
 content: "Hi, Firefox users!";
    }
}
@include firefox-message(".header");
// 编译后
body.firefox .header:before {content: "Hi, Firefox users!"; }

2. 颜色
​	任何CSS颜色表达式都返回一个Sassscript颜色值，这包括大量与未引用字符串无法区分的命名颜色。在压缩输出模式下，Sass将输出颜色的最小CSS表示。例如，#FF0000在压缩模式下将输出为red，而blanchedalmond将输出为#FFEBCD。
$color: #ff0000;
body { 
    color: $color; 
    p {color: #ff0000;}
}
// 编译后 sass --watch demo.scss:demo.css --style compressed
body { color:red; }
body p { color: #ff0000; }

​	用户在使用命名颜色时遇到的一个常见问题是，由于Sass首选的输出格式与在其他输出模式中键入的格式相同，因此在压缩时插入选择器的颜色将成为无效语法。为了避免这种情况，如果要在选择器的构造中使用命名颜色，请始终引用它们。
3. 数组 (Lists)
​	数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过 空格 或者 逗号 分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。
数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：
length() 获取数组长度
index($list, $value) 返回一个值在列表中的位置值
nth($list, $index) 函数可以直接访问数组中的某一项；
join($list1, $list2, [$separator]) 函数可以将多个数组连接在一起；
append($list, $val, [$separator]) 函数可以在数组中添加新值；
zip($lists…) 将几个列表结合成一个多维的列表。。
@each 指令能够遍历数组中的每一项。
示例：实现下面这种效果。HTML 结构很简单，就是一个 ul ，下面 6 个li，每个 li 的背景色不一样。

用传统CSS来写：
.ksxz_ul li:nth-child(1){
   background:#f5ad1b;
}
.ksxz_ul li:nth-child(1):hover{
   background:#f7bf4c;
}
// 。。。

以下代码是在 SCSS 中完成：
// 定义数组，数组元素用逗号隔开
$liColor: #f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278;

// 开始 @each 循环遍历数组
// $c 作为循环变量，代表了数组的元素，不是索引~！！！
@each $c in $liColor{
    $i:index($liColor, $c); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！
    li:nth-child( #{$i} ){  // 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
 background: $c;     // 背景色
 &:hover{
     background: lighten($c, 10%); // hover 后的颜色
 }
    }
}

数组中可以包含子数组
比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。
如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。
区别就是，之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated)，而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。
当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法）
用 () 表示不包含任何值的空数组。空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。
如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。
p { font-family: (); } 	// 编译将会报错 Invalid CSS after "...font-family: ()"

$border: 1px 2px null 3px;  // 或者 $border: 1px 2px () 3px;
.rounded { 
    border: $border ;
}
// 编译后
.rounded { border: 1px 2px 3px; }

基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。
4. Maps
​	Maps可视为键值对的集合，键被用于定位值。
和Lists不同，Maps必须被圆括号包围，键值对被逗号分割 。 Maps中的keys和values可以是sassscript的任何对象。
和Lists一样Maps主要为sassscript函数服务，如 map-get函数用于查找键值，map-merge函数用于map和新加的键值融合，@each命令可添加样式到一个map中的每个键值对。
Maps可用于任何Lists可用的地方，在List函数中 Map会被自动转换为List ， 如 (key1: value1, key2: value2)会被List函数转换为 key1 value1, key2 value2 ，反之则不能。
1. map-merge合并函数
2. map-get获取函数
//创建Maps类型的变量: Maps变量的值必须由圆括号包围，键值对以逗号分隔
$testMaps1: ( size: 14px, color: pink ); 
$testMaps2: (
    color: #666,
    family: (Arial, Helvetica),
    size: 16px,
    line-height: 1.4
);
// map-merge函数，将两个maps变量进行合并，生成一个新的maps变量
$testMaps: map-merge($testMaps1, $testMaps2);

body{ 
    // 通过map-get函数查找某个key的value。可简写成 font-size: map-get($testMaps, size)
    // 注意，size/line-height要使用插值语句，若是直接写/将会被认作是除号，从而进行除法运算
    font: #{map-get($map: $testMaps, $key: size)}/#{map-get($testMaps, line-height)} {
 family: map-get($testMaps, family)
	}  
    color: map-get($testMaps, color); 
}
// 编译后
body { font: 16px; font-family: Arial, Helvetica; line-height: 1.4; color: #666; }

3. map-has-key判断函数
// Map with much breakpoints
$breakpoints: (
  small: 320px,
  medium: 600px,
  large: 768px
);

// Respond-To Mixin
@mixin respond-to($breakpoint) {
    // map-has-key函数用于检测某个key是否存在
  @if map-has-key($breakpoints, $breakpoint) {
    $value: map-get($breakpoints, $breakpoint);

    @media screen and (min-width: $value) {
      @content;
    }
  }

  @warning "Unknown `#{$breakpoint}` in $breakpoints";
} 

// 使用
.m-tabs {
    background-color: #f2f2f2;

    @include reponse-to(medium) {
 background-color: #666;
    }
}

// 编译后
.m-tabs {
  background-color: #f2f2f2;
}
@media screen and (min-width: 600px) {
  background-color: #666;
}

4.  @each 循环Maps变量
// 创建Maps类型的变量: Maps变量的值必须由圆括号包围，键值对以逗号分隔
$icons: (
  checkmark: a,
  plus: b,
  minus: c
);

// @each $name, $value in 变量名 遍历maps变量 $icon，输出icons的所有类
@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;
  }
} 

// 编译结果
.icon--checkmark { content: a; }
.icon--plus { content: b; }
.icon--minus { content: c; }

5. nth函数
// _m-buttons.scss
$buttons: (
  error: (#d82d2d, #666),		// 值是一个数组：(背景颜色, 字体颜色)
  success: (#52bf4a, #fff),
  warning: (#c23435, #fff)
);

.m-button {
  display: inling-block;
  padding: .5em;
  background: #ccc;
  color: #666;

  @each $name, $colors in $buttons {
    $bgcolor: nth($colors, 1);	// 通过nth获取数组中的第一项
    $fontcolor: nth($colors, 2);// 通过nth获取数组中的第二项

    &--#{$name} {
      background-color: $bgcolor;
      color: $fontcolor;
    }
  }
} 
// 编译后
.m-button { display: inling-block; padding: .5em; background: #ccc; color: #666; }
.m-button--error { background-color: #d82d2d; color: #666; }
.m-button--success { background-color: #52bf4a; color: #fff; }
.m-button--warning { background-color: #c23435; color: #fff; }

6. 搭配函数使用
// _config.scss
$layer: (
  offcanvas: 1,
  lightbox: 500,
  dropdown: 10,
  tooltip: 15
);

// _m-lightboxes.scss
@function layer($name) {
  @if map-has-key($layer, $name) {
    @return map-get($layer, $name);
  }

  @warn "The key #{$name} is not in the map '$layer'";
  @return null;
};

.m-lightbox {
  z-index: layer(lightbox);
} 
// 编译后
.m-lightbox { z-index: 500; }

// Scheme of colors
$colorscheme: (
  gray: (
    base: #ccc,
    light: #f2f2f2,
    dark: #666
  ),
  brown: (
    base: #ab906b,
    light: #ecdac3,
    dark: #5e421c
  )
); 
// 颜色获取函数
// 第一个参数是Sass map的对象($scheme) -- 在这个例子中可能是gray或者brown
// 第二个参数就是你想要的颜色($tone)，默认值是base
@function setcolor($scheme, $tone: base) {
    @return map-get(map-get($colorscheme, $scheme), $tone);
}
// 使用
.element {
    color: setcolor(brown);
}
.element--light {
    color: setcolor(brown, light);
}
// 编译后
.element { color: #ab906b; }
.element--light { color: #ecdac3; }

7. 高级：通过Classes定制主题
​	在项目中会经常需要通过一些基础代码创建多套主题，所以这里给出一个建议：在文档的最开始就定义一个 主题类 来满足特定的工作。我们需要一个对象以便能够处理不同名字的主题，同时给出不同的样式模块。
// _config.scss
$themes: (
  theme1: theme-light,
  theme2: theme-dark
);
$config: (
  theme1: (
    background: #f2f2f2,
    color: #000
  ),
  theme2: (
    background: #666,
    color: #fff
  )
);

// 快速获取模块值的方法 
// _functions.scss
@function setStyle($map, $theme, $style) {
    @if map-has-key($map, $theme) {
 @return map-get(map-get($map, $theme), $style);
    }
    @warn "The key `#{$object}` is not available in the map.";
    @return null;
}

// 遍历主题
// _m-buttons.scss 
.m-button {
    // 遍历$themes拿到$key和$value，为不同主题创建map
  	@each $key, $value in $themes {
      	@if map-has-key($config, $key) {
   	.#{$value} & {
      	background: setStyle($config, $key, background);
	color: setStyle($config, $key, color);
   	}
      	} @else {
   	@warn "The key `#{$key} isn't defined in the map $config`"
		}
    }
} 

// 编译后
.theme-light .m-button { background: #f2f2f2; color: #000; }
.theme-dark .m-button { background: #666; color: #fff; }

4.5 运算
所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式
1. 数字运算
​	Sassscript 支持数字的运算有：
数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
关系运算 <, >, <=, >=
可用于所有数据类型的相等运算 **==, != **
$min-width: 200px;
$max-width: 600px; 
// 加减乘除
.border-box {
  width: ($max-width / 2) * 3 + $min-width - 10px; // .border-box { width: 1090px; }
} 

数字内置函数：
percentage($number) 将一个不带单位的数值转成百分比
round($number) 将$number 四舍五入为整数，$number可带单位
ceil($number) 大于 $number ，向上取整
floor($number) 与 ceil()相反，去除 $number 小数，向下取整
abs($number)，返回 $number 的绝对值
min($numbers…)，返回 $number... 的最小值
max($numbers…)，返回 $number... 的最大值
random([$limit])，返回一个随机数
1.1 除法运算
​	/ 在 CSS 中通常起到分隔数字的用途，Sassscript 作为 CSS 语言的拓展当然也支持这个功能，但是同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 Sassscript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。 —— 在Sassscript中， / 有两个作用：分隔数字、除法运算符
以下三种情况 / 将被视为除法运算符号：
如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分
p { 
    $width: 1000px;
    width: $width/2;     // 值的一部分是变量 —— 除法运算符
    width: round(1.5)/2; // 值是算术表达式的一部分 —— 除法运算符
    height: (500px/2);   // 值被圆括号包裹 —— 除法运算符
    margin-left: 5px + 8px/2px; // 加减乘除运算
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
// 编译结果
p { font: 12px/30px; }

2. 颜色值运算
​	众所周知，颜色是由RGB颜色构成的，也就是红绿蓝。表示颜色的数据也是规则的分段，由红绿蓝组成，所以颜色值的运算也是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：
p {
  color: #010203 + #040506;
}
// 计算 01 + 04 = 05、02 + 05 = 07、03 + 06 = 09，然后编译为
p { color: #050709; }

数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如
p {
  color: #010203 * 2;
}
// 计算 01 * 2 = 02、02 * 2 = 04、03 * 2 = 06，然后编译为
p { color: #020406; }

需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
// 编译为
p { color: rgba(255, 255, 0, 0.75); }

颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
$trans-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($trans-red, 0.3); // 使用 opacity 函数
  background-color: transparentize($trans-red, 0.25); // 使用 transparentize 函数
}
// 编译为
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}

IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。
$trans-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($trans-red)}');
}
// 编译为
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

对于颜色的操作，scss提供了大量内置函数，非常方便。
3. 字符串运算
+ 可用于连接字符串。有引号字符串+无引号字符串=有引号字符串；无引号字符串+有引号字符串=无引号字符串
运算表达式与其他值连用时，用空格做连接符
在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
空的值被视作插入了空字符串
p {
    cursor: e + -resize;	// 使用+拼接字符串
    margin: 3px + 4px auto; // 运算表达式与其他值连接时，用空格作为连接符
    &::before{
 content: "Foo " + Bar;			// 有引号字符串+无引号字符串=有引号字符串
 font-family: sans- + "serif"; 	//无引号字符串+有引号字符串=无引号字符串
    }
    &::after{
		content: "I ate #{5 + 10} pies!";	// 在有引号的文本字符串中使用插值语句添加动态的值
    }
    a{
 $value: null;
 content: "I ate #{$value} pies!";	// 空的值被视作插入了空字符串
    }
}
// 编译结果
p { cursor: e-resize; margin: 7px auto; }
p::before { content: "Foo Bar"; font-family: sans-serif; }
p::after { content: "I ate 15 pies!"; }
p a { content: "I ate  pies!"; }

字符串内置函数
unquote($string)  删除 $string 前后的引号。
quote($string)  给 $string前后添加引号
str-length($string) 返回 $string 的长度
str-insert($string, $insert, $index)  在指定位置插入字符
str-index($string, $substring) 返回指定字符在字符串的位置
to-upper-case($string) 将$string小写字母转成大写字母
to-lower-case($string) 将$string大写字母转成小写字母
4. 布尔运算
Sassscript 支持布尔型的 and or 以及 not 运算。
5. 数组运算
数组不支持任何运算方式，只能使用 list functions 控制（见数据类型——数组一章）。
4.6 圆括号
圆括号可以用来影响运算的顺序：
p {
  width: 1em + (2em * 3);
}
// 编译为
p { width: 7em; }

4.7 函数
Sassscript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：
p {
    color: hsl(0, 100%, 50%);	// hsla($hue, $saturation, $lightness, $alpha: 1)
    border-width: if(true, 10px, 15px);
}
// p { color: red; border-width: 10px; }

Sass 函数允许使用关键词参数 (keyword arguments)，上面的例子也可以写成：
p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

通过 Sass::script::Functions 查看完整的 Sass 函数列表，参数名，以及如何自定义函数。
全局函数
// hsl函数--返回值: color
hsl($hue $saturation $lightness)
hsl($hue $saturation $lightness / $alpha)
hsl($hue, $saturation, $lightness, $alpha: 1)
hsla($hue $saturation $lightness)
hsla($hue $saturation $lightness / $alpha)
hsla($hue, $saturation, $lightness, $alpha: 1) 
// rgb函数--返回值: color
rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha)  
// 条件函数，类似于三元表达式
if($condition, $if-true, $if-false) 

4.8 插值语句 #{} (Interpolation)
插值 (interpolation) —— 将一个占位符，替换成一个值。插值其实就是字符串连接的语法糖而已。
通过 #{} 插值语句可以在选择器或属性名中使用变量
#{} 插值语句也可以在属性值中插入 Sassscript —— 可以避免 Sass 运行运算表达式，直接编译 CSS。
$name: foo;
$attr: border;
p.#{$name} { // 在选择器中使用变量
  #{$attr}-color: blue; // 在属性名中使用变量
}
// p.foo { border-color: blue; }

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};	// 避免将/用作除法运算符
}
// p { font: 12px/30px; }

$colors: (
    "primary": tomato,
    "secondary": hotpink
);

  // _function.scss
@function findColor($key) {
    @if map-has-key($map: $colors, $key: $key) {
 @return map-get($colors, $key); 
    }
    @warn 'Key `#{$key}` is not found in $colors'; // 插值语句使用场景：打印字符串中变量的内容
    @return #000;
}
 
.el {
    background-color: findColor(primary2);
}

1. 与css函数
​	假设你想基于侧边栏的宽度设置主容器的大小。你是一个勤奋的前端开发者，已经把这个宽度存储在一个变量中，所以，你可能会这样做：
$sidebar-width: 250px;
.main {
    width: calc(100% - $sidebar-width); //将变量用于css函数--初衷是想像css那样进行运算，但是。。
}
// 编译结果： .main { width: calc(100% - $sidebar-width); }

​	然后，你会惊讶地发现，根本不work。没有报错，容器的大小却又不正确。如果你去审查你的dom元素，你会看到这个被划掉了。因为，这是不合法的。
​	现在我们应该想到：calc() 是一个CSS函数，不是一个Sass函数。这就是说Sass会将整个表达式解释成一个字符串。你可以试试：
$sidebar-width: 250px;
.main { 
    $type-of-expression: type-of(calc(100% - $sidebar-width)); // 使用type-of判断类型
    content: $type-of-expression;
}
// .main { content: string; }

​	因为这是一个字符串，难怪Sass表现和之前@warn中的$colors字符串一样。$sidebar-width被认为是一个常规字符串，所以打出来就是它自己。但这都不是我们所想要的，是吧？我们用插值这样做。
.main {
    width: calc(100% - #{$sidebar-width}); // 在编译时，会用250px替换#{$sidebar-width}
}
// 编译后：.main { width: calc(100% - 250px); }

我们仅仅在这里谈了calc()，但其实和其他CSS 原生函数是一样的，包括伪类。比如：url()，linear-gradient()，radial-gradient()，cubic-bezier()。
以下是另一个使用CSS函数的例子：
@for $i from 1 through $max {
    .el:nth-of-type(#{$i}) {
 // ...
    }
}

小结：Sass会把CSS函数认为是字符串，所以想要在最后获得它们的值，要求你转义所有同它们一起使用的变量。
2. css指令
我们将视转移到另一个有趣的变量插值场景：CSS指令，比如@support，@page，最重要的还是@media。
现在，Sass是怎样解析CSS指令，尤其是demia指令的。我已经查看过Sass的源码，当我Ruby环境有点问题的时候，我找到一些有趣的事情。
def query_expr
    interp = interpolation		
    return interp if interp
    return unless tok(/(/)
    res = ['(']
    ss
    res << sass_script(:parse)

    if tok(/:/)
 res << ': '
 ss
 res << sass_script(:parse)
    end
    res << tok!(/)/)
    ss
    res
end

第一行告诉Sass，如果有一个插值表达式的话，便返回media query。如果找到一个开括号(()，便会一直往下走，解析所有的东西，反之就会抛出一个错误。我们在这里试试一个例子：
$value: screen;

@media $value {
    // ...
}

毫不惊讶的是，这失败了：

Invalid CSS after "@media ": expected media query (e.g. print, screen, print and screen), was “$value {”

就像错误信息提示的那样，它期待一个media query。在这里，如果你的变量在 @media 字符串后面，需要使用插值才可以。比如：
$value: screen;

@media #{$value} {
    // ...
}

和我们之前讨论的Ruby转义规则一样，如果@media后面紧跟（()），你就不再需要插值变量了，因为Sass会求出所有在这些括号里面的值。比如：
$value: 1336px;

@media (max-width: $value) {
    // ...
}

在这个示例中，Sass将这个表达式(max-width: $value)转化成(max-width: 1337px)，最后生成合法的CSS结果。所以，我们便没有必要再对变量转义了。
4.9 & in Sassscript
​	就像在选择器中使用一样，在Sassscript中 &表示当前的父选择器，它时一个用逗号分隔的数组列表
.foo.bar .baz.bang, .bip.qux {
    $selector: &;	// 定义一个变量，变量值就是 父选择器标识符
    content: $selector;
}
// 编译结果
.foo.bar .baz.bang, .bip.qux { 
    content: .foo.bar .baz.bang, .bip.qux;  // 是一个用逗号分隔的数组列表
}

如果不存在父选择器，那么 & 的值就是 null，这也就意味着可以在 mixin中去判父元素是否存在：
@mixin does-parent-exist {
    @if & { // 如果父选择器存在，那么就给父元素添加hover样式
 &:hover {
     color: red;
 }
    } @else {
 a {
     color: red;
 }
    }
}
div{ @include does-parent-exist(); }

// 编译结果  div:hover { color: red; }

4.10 变量定义 !default
​	可以在变量的结尾添加 !default ，给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
变量是 null 空值时将视为未被 !default 赋值。
$content: "First content";
$content: "Second content" !default; // $content在此之前已经被赋值，所以此处不会进行重新赋值
$new_content: null; // 变量值null被视为未赋值
$new_content: "First time reference" !default; // 所以此处可以重新赋值

#main {
  content: $content;
  new-content: $new_content;
}
// 编译结果
#main { content: "First content"; new-content: "First time reference"; }

!default一个重要的作用就是，如果我们引入的他人scss文件中的变量有默认值的设置，那么我们就可以很灵活的来修改这些默认值，只要在这些导入文件之前引入就一个配置scss文件即可,而无需修改他人的scss文件，例如:
// 在导入他人文件之前，修改默认值，而无需修改他人的scss文件
$theme: dark;
// 引入他人的scss文件
@import "config";
@import "variables";
@import "mixins";

参考
scss官网