上一篇学完了Sass基础部分，这次要学习的是Sass的高级部分。
条件语句
在Sass中也有条件判断的语句，用法为@if boolean和@else，可以配合混合宏传进来的参数来进行选择输出，在if的后面可以跟判断语句，不需要括号。
@mixin blockOrHidden($boolean:true) {
@if $boolean {
display: block;
}
@else {
display: none;
}
}
p {
@if 2 + 3 == 5 { border: 1px solid; }
@if 10 < 5 { border: 2px dotted; }
}
循环语句
在sass中支持for循环，while循环，each循环。
for循环
for循环有两种形式，分别为：
@for $var from <start> through <end>
@for $var from <start> to <end>
$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to（包含头不包含尾）则不包括end这个数。
/* i的值为1-3 */
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
/* i的值为1-2 */
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
while循环
while循环和if相似，后面可以跟判断语句。
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}
each循环
在sass中也有each循环，语法如下@each $var in <list>。
list是一个列表，也可以理解为数组。
$list: adam john wynn mason kuroir;
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
...
}
}
}
函数
sass提供一些函数功能，如下。
- 字符串函数
- 数字函数
- 列表函数
- 颜色函数
- Introspection 函数
- 三元函数等
字符串函数
字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：
- quote($string)：给字符串添加引号。
- unquote($string)：删除字符串中的引号。
- To-upper-case()：函数将字符串小写字母转换成大写字母。
- To-lower-case()：函数将字符串大写字母转换成小写字母。
quote用法：
/* scss文件 */
.test1 {
content: quote('Hello Sass!');}
.test2 {
content: quote("Hello Sass!");}
.test3 {
content: quote(ImWebDesigner);}
.test4 {
content: quote(' ');}
/* -------css文件------- */
.test1 {
content: "Hello Sass!";
}
.test2 {
content: "Hello Sass!";
}
.test3 {
content: "ImWebDesigner";
}
.test4 {
content: " ";
}
使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。
同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。
unquote用法：
/* scss文件 */
.test1 {
content: unquote('Hello Sass!');}
.test2 {
content: unquote("'Hello Sass!");}
.test3 {
content: unquote("I'm Web Designer");}
.test4 {
content: unquote("'Hello Sass!'");}
.test5 {
content: unquote('"Hello Sass!"');}
.test6 {
content: unquote(Hello Sass);}
/* -------css文件------- */
.test1 {
content: Hello Sass!;
}
.test2 {
content: 'Hello Sass!;
}
.test3 {
content: I'm Web Designer;
}
.test4 {
content: 'Hello Sass!';
}
.test5 {
content: "Hello Sass!";
}
.test6 {
content: Hello Sass;
}
从测试的效果中可以看出，unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。
To-upper-case用法：
/* scss文件 */
.test {
text: to-upper-case(aaaaa);
text: to-upper-case(aA-aAAA-aaa);
}
/* -------css文件------- */
.test {
text: AAAAA;
text: AA-AAAA-AAA;
}
To-lower-case用法：
/* scss文件 */
.test {
text: to-lower-case(BBBBB);
text: to-lower-case(bB-bBBB-bbb);
}
/* -------css文件------- */
.test {
text: bbbbb;
text: bb-bbbb-bbb;
}
数字函数
- percentage($value)：将一个不带单位的数转换成百分比值。
- round($value)：将数值四舍五入，转换成一个最接近的整数。
- ceil($value)：向上取整数（进一法）。
- floor($value)：向下去整数。
- abs($value)：返回一个数的绝对值。
- min($numbers…)：找出几个数值之间的最小值。
- max($numbers…)：找出几个数值之间的最大值。
- random(): 获取随机数。
percentage()用法：
/* scss文件 */
.footer {
margin: percentage(.5);
}
/* -------css文件------- */
.footer {
margin: 50%;
}
round() 用法：
/* scss文件 */
.nav{
width:round(11.2px);
}
/* -------css文件------- */
.nav {
width: 11px;
}
ceil() 用法：
/* scss文件 */
.error {
width: ceil(-10.6)+px;
}
.success {
width: ceil(10.6)+px;
}
/* -------css文件------- */
.error {
width: -10px; // 进一法，因为-10比-10.6大
}
.success {
width: 11px;
}
floor()向下取整数，和ceil()相反：
/* scss文件 */
.error {
width: floor(-10.6)+px;
}
.success {
width: floor(10.6)+px;
}
/* -------css文件------- */
.error {
width: -11px; // 向下与取整，-11比-10.6小
}
.success {
width: 10px;
}
abs( ) 函数会返回一个数的绝对值。
/* scss文件 */
.footer {
width:abs(-12.3px);
}
/* -------css文件------- */
.footer {
width: 12.3px;
}
min() 用法：
/* scss文件 */
.error {
width: min(1em,2em,6em);
}
/* -------css文件------- */
.error {
width: 1em;
}
max()用法：
/* scss文件 */
.error {
width: max(1em,2em,6em);
}
/* -------css文件------- */
.error {
width: 6em;
}
random()用法：
/* scss文件 */
.error {
width: random();
}
/* -------css文件------- */
.error {
width: 0.22617;
}
sass@规则
@import
Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
@import 根据文件名引入。默认情况下，它会寻找 Sass 文件并直接引入，但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：
- 如果文件的扩展名是 .css。
- 如果文件名以 http:// 开头。
- 如果文件名是 url()。
- 如果 @import 包含了任何媒体查询（media queries）。
注意：在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存。
@media
在 sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中，但在编译时会跳出嵌套，重新整合属性。
/* scss文件 */
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
/* -------css文件------- */
.sidebar {
width: 300px;
}
/* 跳出嵌套 */
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。
/* scss文件 */
.a {
.b {
.c {
@at-root .d {
color: green;
}
}
}
}
/* -------css文件------- */
.d {
color: green;
}
