前戏:前几篇文章其实都是些基础必备的,什么变量、继承、占位符、混合宏...这回来高级点的,玩玩
Sass
自带的一些函数...有字符串函数(String Functions
)、数字函数(Number Functions
)、列表函数(List Functions
)、颜色函数(Color Functions
)、Introspection
函数(Introspection Functions
)、三元函数(Miscellaneous Function
)
1. 字符串函数
1.1 quote()
quote($string)
给$string
前后添加引号。
//SCSS:
p:after{
content: quote(hello +' '+ sass);
//中间有空格(其他特殊符号)需要拼字符串;quote(hello sass); 直接这样会报错;
}
p:before{
content: quote('This\'s' + ' ' + 'bug');
//如果$string本身就带有引号,则会统一换成双引号`""`;
}
//编译为:
p:after { content: "hello sass"; }
p:before { content: "This's bug"; }
1.2 unquote()
unquote($string)
删除$string
前后的引号。
//SCSS:
p:after{
content: unquote("This's bug"); //中间的引号未被删除;
}
p:before{
content: unquote(Thissbug);
//如$string本身就不带引号,则返回$string本身;
}
//编译为:
p:after { content: This's bug; }
p:before { content: sass; }
其实吧!这俩玩意在项目中我还真没用到过!
1.3 str-length()
str-length($string)
返回$string
的长度。
//SCSS:
p:before { content: str-length('hello sass!'); }
//编译为:
p:before { content: 11; }
1.4 to-upper-case()
to-upper-case($string)
将$string
小写字母转成大写字母。
//SCSS:
p:before { content: to-upper-case('hello sass!'); }
//编译为:
p:before { content: "HELLO SASS!"; }
1.5 to-lower-case()
to-lower-case($string)
将$string
大写字母转成小写字母。
//SCSS:
p:before { content: to-lower-case('HELLO SASS!'); }
//编译为:
p:before { content: "hello sass!"; }
2. 数字函数
2.1 percentage()
percentage($number)
将一个不带单位的数值转成百分比。
//SCSS:
.box{ width: percentage(.5)}
.box2{ width: percentage(.1rem / .3rem)}
经测试,两个相同的单位,除了用除法 '/' 其他+-%均会报错,且用除法 '/' 也只能在两个相同类型的单位之间进行运算;*
//编译为:
.box { width: 50%; }
.box2 { width: 33.33333%; }
2.2 round()
round($number)
将$number
四舍五入为整数,$number
可带单位。
//SCSS:
.xs-row{ width: round(33.33333333333333px)}
//编译为:
.xs-row { width: 33px; }
2.3 ceil()
ceil($number)
大于$number
,向上取整。
//SCSS
.fs14{ font-size: ceil(13.1px)}
.fs16{ font-size: ceil(15.9px)}
//编译为:
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
2.4 floor()
与
ceil()
相反,floor($number)
去除$number
小数,向下取整。
//SCSS:
.fs14{ font-size: floor(14.1px) }
.fs16{ font-size: floor(16.9px) }
//编译为:
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
2.5 abs()
abs($number),返回
$number
的绝对值。
//SCSS:
.fs16{ font-size: abs(-1.6rem) }
.fs18{ font-size: abs(1.8rem) }
//编译为:
.fs16{ font-size: 1.6rem; }
.fs18{ font-size: 1.8rem; }
2.6 min() max()
min($numbers…),返回
$number...
的最小值。
max($numbers…),返回$number...
的最大值。
//SCSS:
div{ width: min(2rem, 10rem) }
div{ width: max(2rem, 10rem) }
div{ width: max(2px, 10rem) } //非相同的单位,报错
//编译为:
div { width: 2rem; }
div { width: 10rem; }
Incompatible units: 'rem' and 'px'
2.7 random()
random([$limit]),返回一个随机数。
//SCSS:
div {
height: random(); //直接调用
width: random(666); //传个参
}
//编译为:
div {
height: 0.3649;
width: 403;
}
3. 列表函数
常用
3.1 length() nth()
length($list)
,返回$list
的长度值;nth($list, $n)
,返回$list
中指定的某个$n
,且$n
必须是大于0的整数;Javascript的Array()的索引是从0开始的,厄...有点扯远了,用过
css3
的:nth-child(n)
都应该知道啦,索引下标也是从1开始的,So.....
//SCSS:
$list: google, baidu, sogo;
@for $i from 1 through length($list){ //取$list的length并循环输出;
.icon-#{nth($list, $i)}{ //$list中的某个索引值;
content: '#{nth($list, $i)}'
}
}
//编译为:
.icon-google { content: "google"; }
.icon-baidu { content: "baidu"; }
.icon-sogo { content: "sogo"; }
3.2 join()
join($list1, $list2, [$separator])
将两个列表给连接在起来,组成一个列表;$separator
默认值是auto
,另外还有comma
和space
两个值,其中comma
值指定列表中的列表项值之间使用逗号,
隔开,space
值指定列表中的列表项值之间使用空 格
分隔。
join((blue, red), (#abc, #def), space) => blue red #abc #def //space
join(10px, 20px, comma) => 10px, 20px //comma
Examples:
//SCSS:
$list1: google, baidu, sogo;
$list2: facebook, instagram, twitter;
$list3: join($list1, $list2); //讲真啦,很少用到join(),反正我是很少用到;
@for $i from 1 through length($list3){
.icon-#{nth($list3, $i)}{
content: '#{nth($list3, $i)}'
}
}
//编译为:
.icon-google { content: "google"; }
.icon-baidu { content: "baidu"; }
.icon-sogo { content: "sogo"; }
.icon-facebook { content: "facebook"; }
.icon-instagram { content: "instagram"; }
.icon-twitter { content: "twitter"; }
3.3 index()
index($list, $value)
,返回$list
中的$value
所在的位置。
index(1px solid red, solid) => 2
index(1px solid red, dashed) => null
index((width: 10px, height: 20px), (height 20px)) => 2
3.4 list-separator()
list-separator($list)
,返回$list
中的分隔符。
list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator('foo') => space
4. Introspection 函数
4.1 type-of()
type_of($value)
返回$value
的类型。
type-of(abc) => string
type-of("abc") => string
type-of(true) => bool
type-of(#fff) => color
type-of(green) => color
4.2 unit()
unit($number)
返回$number
所使用的单位。
unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"
4.3 unitless()
unitless($number)
返回$number
是否带有单位;如果不带单位返回值为true
,带单位返回值为false
。
unitless(100) => true
unitless(100px) => false
5. Miscellaneous 函数
Miscellaneous
函数称为三元条件函数,主要因为他和JavaScript
中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值
if($condition, $if-true, $if-false)
当 $condition
条件为真,则返回 $if-true
值,否则返回 $if-false
值。
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
6. 颜色函数
暂时还没用到过。
6.1 RGB函数()
rgb($red, $green, $blue)
,根据$red
、$green
、$blue
三个值创建一个颜色;rgba($red, $green, $blue, $alpha)
,将一个颜色根据透明度转换成 rgba 颜色。
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)
7. Reference API
Sass::Script::Functions — Sass Documentation
结语:既然你都看到这里了,我就说说吧,这些个函数其实也就在自己写插件的时候有用,其他时候可能会有些大材小用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。