Sass 基础(五) - 柠檬先生
@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
@for $i from
$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中的
其遍历出来的终点值也是 12，和
就是
@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
例如：
@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 的整数；