携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，[点击查看活动详情]
SCSS函数
SCSS允许用户使用@funciton创建自定义函数，并执行函数得到结果：
@function double($n){
@return $n*2
}
.content {
width: double(100px);
height: 30px * 3;
border: 1px solid red;
}
SCSS控制
SCSS的控制指令使得其更像一门编程语言，支持在代码中使用判断、循环语句，使用@+指令名的形式。
- @if指令
@if指令用来控制一个样式块是否得到使用。
@if指令的语法是@if condition{...}，其中的condition和编程语言基本一样，其值可以是一个布尔值，一个带有布尔值的表达式（例如使用==或者>的表达式），甚至一个带有其他值的表达式（因为这些值被视为true）。如果表达式为true，那么这个样式块就在使用中，否则，这个样式块就被忽略了。
$num1: 100;
$num2: 10;
.content {
@if $num1 > $num2 { width: 150px; color:red } /* 此样式块会被使用*/
height: 30px * 3;
border: 1px solid red;
}
也可以使用在@if块后使用@else进行分支判断，其语法是@else {...}。
$num1: 8;
$num2: 10;
.content {
@if $num1 > $num2 { width: 150px; color:red }
@else { width: 350px; color:green } /* 此样式块会被使用*/
height: 30px * 3;
border: 1px solid red;
}
亦可使用@eles if condition{...} 来实现多分支判断，每个@if指令可以搭配任意数量的@else if指令，但整个语句块中，只能使用一个@else指令作为最后的判断分支。
$num1: 8;
.content {
@if $num1 >= 20 {
width: 150px; color:red
} @else if $num1 <= 10{ /* 此样式块会被使用*/
width: 200px; color:blue
} @else {
width: 350px; color:green
}
height: 30px * 3;
border: 1px solid red;
}
- @for指令
@for指令用来循环，它有两种相似的语法：@for i from 1 through 10 {...}。和其他语言一样，都是从1->10执行多次，但两者区别在于1 to 10，最后一个循环后i的值停在10。例如，我们使用@for来循环设置5张图片的轮播图：
/* SCSS */
@for $i from 1 through 5 {
.banner-#{$i} {
background-image: url(/images/banner-#{$i}.png);
}
}
/* CSS 编译后 */
.banner-1 {
background-image: url(/images/banner-1.png); }
.banner-2 {
background-image: url(/images/banner-2.png); }
.banner-3 {
background-image: url(/images/banner-3.png); }
.banner-4 {
background-image: url(/images/banner-4.png); }
.banner-5 {
background-image: url(/images/banner-5.png); }
- @each指令
@each语法@each item。
例如，设置每个网站板块的banner图：
/* SCSS */
@each $pic in about, news, project,contact {
category-pic .#{$pic} {
background-image: url(/images/pic/#{$pic}.png); }
}
/* CSS 编译后 */
category-pic .about {
background-image: url(/images/pic/about.png); }
category-pic .news {
background-image: url(/images/pic/news.png); }
category-pic .project {
background-image: url(/images/pic/project.png); }
category-pic .contact {
background-image: url(/images/pic/contact.png); }
- @while指令
@while指令也是来进行循环的，指令重复输出样式块，直到表达式返回结果为 false。其语法是 @while condition{...} ，较少用到。
/* SCSS */
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
/* CSS 编译后 */
.item-6 {
width: 12em;
}
.item-4 {
width: 8em;
}
.item-2 {
width: 4em;
}
