Sass 基础(五)
@if @if 指令是一个SassScript,它可以根据条件处理样式块，如果条件为true返回一个样式块，反之 false 返回另一个样式块，在Sass 中除了@if之，还可以配合@else if和eles 一起。 例如：
//SCSS
@mixin blockOrHidden($boolean:true){
@if $boolean {
@debug "$boolean is #{$boolean}";
display:block;
}
@else{
@debug "$boolean is #{$boolean}";
display:none;
}
}
.block{
@include blockOrHidden;
}
.hidden{
@include blockOrHidden(false);
}编译出来的css
.block{
display:block;
}
.hidden{
display:none;
}@for循环（上） 在Sass 的@for 循环中油两种方式： @for $i from <start> through <end> @for $i from <start> to <end> $i 表示变量 start 表示起始值 end 表示结束值 这两个的区别是一个关键字，through 表示包括end 这个数，而to 则不包括end 这个数。 如下代码，先来一个使用through 关键字。
@for $i from 1 throug 3 {
.item-#{$i} {
width:2em *$i;
}
}编译出来css
.item-1{
width:2em;
}
.item-2{
width:4em;
}
.item-3{
width:6em;
}在来一个to关键字的例子：
@for $i from to 3 {
.item-#{$i} { width:2em * $i;}
}编译出来的css:
.item-1{
width：2em;
}
.item-2{
width：4em;
}@for循环（下） @for 应用在网格系统生成各个格子class 的代码。
//scss
$grid-prefix: span !default;
$grid-width:60px !defaulet;
$grid-gutter:20px !defaulet;
%grid{
float:left;
margin-left:$grid-gutter / 2;
margin-right:$grid-gutter / 2;
}
@for $i from 1 through 12 {
.#{$grid-prefix} #{$i}{
width:$grid-width *$grid-gutter *($i - 1);
@extend %grid;
}
}编译出来的css
.span1, .span2, .span3, .span4, .span5
, .span6, .span7, .span8, .span9, .span10,
, .span11,, .span12{
float:left;
margin-left:10px;
margin-right:10px;
}
.span1{
width:60px;
}
.span2{
width:140px;
}
.span3{
width:220px;
}
.span4{
width:300px;
}
.span5{
width:380px;
}
.span6{
width:400px;
}
.span7{
width:540px;
}
.span8{
width:620px;
}
.span9{
width:700px;
}
.span11 {
width: 860px;
}.span12 { width: 940px; } 将上面的示例稍做修改，将 @for through 方式换成 @for to:： //scss @for $i from 1 to 13{ . #{$grid-prefix}#{$i}{ width:$grid-width * $i + $grid-grutter *($i -1); @extend %grid; } } 这两段 Sass 代码并无太多差别，只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12， 其遍历出来的终点值也是 12，和 <end> 值一样。配合 to 的 <end> 值是 13，其遍历出来的终点值是 12， 就是 <end> 对就的值减去 1 @while 循环 @while指令也需要SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false 时停止循环。这个和@for 指令很相似，只要@while 后面的条件为true就会执行。 例如： //SCSS $types:4; $type-width:20px; @while $types > 0{ .while-#{$types} width:$type-width + $types; } $types: $types - 1; 编译出来css .while-4{ width:24px; } .while-3{ width:23px; } .while-2{ width:22px; } .while-1{ width:21px; } @each循环 @each循环就是去遍历一个列表，依然从列表中取出对应的值。 @each 循环指令的形式： @each $var in <list> 例如： @mixin author-images{ @each $author in $list { .photo-#{$author}{ background:url("/images/avatars/#{$author}.png") no-repeat; } } } .anthor-bio{ @include author-images; } 编译出来 CSS .author-bio .photo-adam{ background:url("/images/avatars/adam.png") no - repeat; } .author-bio .photo-john{ background:url("/images/avatars/john.png") no - repeat; } .author-bio .photo-wynn{ background:url("/images/avatars/wynn.png") no - repeat; } .author-bio .photo-mason{ background:url("/images/avatars/mason.png") no - repeat; } .author-bio .photo-kuroir{ background:url("/images/avatars/wynn.png") no - repeat; } Sass的函数简介 函数主要包括。 字符串函数 数字函数 列表函数 颜色函数 Interospection函数 三元函数等。 字符串函数-unquote() 函数 字符串函数顾名思义是用来处理字符串的函数，Sass 的字符串函数要包括两种。 unquote($string): 删除字符串中的引号 quote($string):给字符串添加引号。 1.unquote()函数。 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代码 // 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( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。 如果字符没有带引号，返回的将是字符串本身。 字符串函数-quote()函数 quote()函数刚好与unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号 会统一换成双引号。 // SCSS .test1{ content: quote( 'Hello Sass!' ); } .test2{ content: quote("Hello Sass!") } .test3{ content: quote(ImWebDesigner); } .test4{ content: quote(' '); } 编译出来的css 代码 // css .test1{ content: "Hello Sass!"; } .test2{ content: "Hello Sass!" } .test3{ content: "ImWebDesigner"; } .test4{ content: ""; } 使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时， 需要用单引号或双引号括起，否则编译的时候将会报错。 字符串函数-To-upper-case(),To-lower-case() 1.To-upper-case(),To-lower-case() To-upper-case() //SCSS .test { text:to-upper-case(aaaaa); text:to-upper-case(aA-aAAA-aaa); } 编译出来的css 代码 // CSS .test{ text:AAAAA; text:AA-AAAA-AAA; } 2.To-lower-case() To-lower-case() 函数 与To-upper-case()刚好相反，将字符串转成小写字母。 // SCSS .test{ text: to-lower - cass(AAAAA); text: to-lower-case(aA-aAAA-aaa) } 编译出来的 css 代码； //css .test{ text: aaaaa; text:aa-aaaa-aaa; } 数字函数简介 Sass 中的数组函数要针对数字方面提供一系列的函数功能: percentage($value):将一个不带单位的数转换成百分比： round($value):将数值四舍五入，转换成一个最接近的整数； ceil($value):将大于自己的小数转换成下一位整数； floor($value):将一个数去除他的小数部分； abs($value):返回一个数的绝对值。 min($numbers...) 找出几个数之间的最小值： max($numbers...)找出几个数值之间的最大值 random() 获取随机数。 数字函数-percentage() 1.percentage() percentage() 函数主要是将一个不带单位的数字转成 百分比形式： >> percentage(.2) 20% >>percentage(2px / 10px) 20% >>percentage(2em / 10em) 20% >> .footer{ width:percentage(.2) } 编译后的css 代码; .footer{ width：20%； } 数字函数-round() 函数 round()函数可以将一个数四舍五入为一个最近的整数; >>round(12.3) 12 >> round(12.5) 13 >>round(1.499999) 1 >>round(20%) 20% >>round(3.9em) 4em >>round(2.3px) 2px >>round(1px /3px) 0 >>round(3px / 2em) 2px/em
.footer{ width:round(12.3px) } 编译出来的css .footer{ width:12px; } 数字函数-ceil()函数 ceil()函数将一个数转换成最接近自己的整数，会讲一个大约自身的任何小数转换成大约本身1的整数，也就是只做入，不做舍的 >> ceil(2.0) 2 >>ceil(2.1) 3 >>ceil(2.6) 3 >>ceil(2.3%) 3% >>ceil(2.5px) 3px >>ceil(2px / 3px) 1 >>ceil(2% / 3px) 1%/px >>ceil(1em / 5px) 1em/px .footer{ width:ceil(12.3px); } 编译后的css 代码： .footer{ width:13px; } 数字函数-floor()函数 floor()函数刚好与ceil()函数功能相反，其主要将一个数去除其小数部分。并且不做任何的进位，也就是只做舍，不做入的计算。 >> floor(2.1) 2 >> floor(2.5) 2 >>floor(3.5%) 3% >>floor(10.2px) 10em >> floor(10.2px) 10px >>floor(10.8em) 10em >>floor(2px / 10px) 0 >> floor(3px / 1em) 3px /em .footer{ width:floor(12.3px); } 编译后的css代码 .footer{ width:12px; } 数字函数-abs() 函数 abs()函数会返回一个数的绝对值。 >>abs(10) 10 >>abs(-10) 10 >>abs(-10px) 10px >>abs(-2em) 2em >>abs(-.5%) 0.5% >>abs(-1px / 2px) 0.5 .footer{ width:abs(-12.3px) } 编译后的css代码： .footer{ width:12px; } 数字函数-min()函数，max()函数 min() 函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数。 >>min(1,2,1%,3.300%) 1% >> min(1px,2,3px) 1px >>min(1em,2em,6em) 1em 不过在min() 函数中同时出现两种不同类型的单位，将会报错误信息。 >>min(1px, 1em) SyntaxError: Incompatible units:'em' and'px'. max()函数 max()函数和min函数一样，不同的是,max() 函数用来获取一系列书数中的最大那个值。 >> max(1,5) 5 >>max(1px,5px) 5px 同样的，如果在max()函数中有不同的单位，将会报错： >> max(1,3px,5%,6) SyntaxError: Incompatible units: '%' and ‘px'. 数字函数-random()函数 random()函数是用来获取一个随机数。 >> random() 0.03886 >>random() 0.66527 >> random() 0.8125 >>random() 0.26839 >>random() 0.85065 列表函数介绍 列表函数主要包括一些对列表参数的函数使用，主要包括以下几种形式。 length($list):返回一个列表的长度值： nth($list,$n):返回一个列表中指定的某个标签值。 join($list1,$list2,[$separator] ):将某个值放在列表的最后； zip($lists...);将几个列表结合成一个多维的列表： index($list,$value)返回一个值在列表中的位置值。 length()函数 length()函数主要用来返回一个列表的中有几个值，简单点说就是返回列表清单中有多少个值： >>length(10px) 1 >>length(10px 20px (border 1px solid) 2em) 4 >>length(border 1px solid) 3 length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错； >> length(10px, 20px,(border 1px solid),2em) SyntaxError: wrong number of arguments(4 for 1) for'length nth($list,$n) nth()函数用来指定列表中某个位置的值，不过在Sass 中，nth()函数和其他语法不同，1 是指列表中的第一个标签值 2 是指列表中的第二个标签值。 >> nth(10px 20px 30px,1) 10px >>nth((Helvetica,Arial,sans-serif),2) "Arial" >>nth((1px solid red) border-top green,1) (1px "solid" #ff0000) 在nth($list,$n) 函数中的$n 必须是大于 0 的整数；