Sass语法(二)之函数
一.函数
1.字符串函数-unquote()函数
quote($string)：给字符串添加引号。
①unquote($string)删除字符串中的引号
//SCSS
.test1 {
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!; }
.test3 {
content: I'm Web Designer; }
.test4 {
content: 'Hello Sass!'; }
.test5 {
content: "Hello Sass!"; }
.test6 {
content: Hello Sass; }
② quote($string)给字符串添加引号
//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: "";
}
注意：
.test1 {
content: quote(Hello Sass);//这样使用，编译器马上会报错。
}
.test1 {
content: quote(HelloSass);
}
.test1 {
content: quote("Hello Sass");
}
③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;
}
④To-lower-case()将字符串转换成小写字母
//SCSS
.test {
text: to-lower-case(AAAAA);
text: to-lower-case(aA-aAAA-aaa);
}
编译出来的 css 代码：
//CSS
.test {
text: aaaaa;
text: aa-aaaa-aaa;
}
2.数字函数
① percentage($value)换成百分比值
width : percentage(.2)；
padding:percentage(3px/10px);
}
编译后的 css 代码：
.footer{
width : 20%；
padding：30%;
}
②round($value)四舍五入
>> width:round(12.3)-----//12
>> width:round(12.5)-----//13
>> width:round(1.49999)-----//1
>> width:round(2.0)-----//2
>> width:round(20%)-----//20%
>> width: round(2.2%)-----//2%
>> width:round(1px / 3px)-----//0
>> width:round(3px / 2em)-----//报错③ceil($value)将小数大于1的数转换成下一位整数
.footer {
width:ceil(6.0); //----6
width:ceil(12.3px);//----13px
width:ceil(2.6);//----3
width: ceil(2.3%);//---3%
width:ceil(2px / 3px);//---1
width:ceil(2% / 3px);//-----报错
width:ceil(1em / 5px)//-----报错
}
④floor($value)去除小数部分
.footer {
width:floor(2.1); //----2
width:floor(12.3px);//----12px
width:floor(2.8);//----2
width:floor(3.5%);//---3%
width:floor(2px / 10px)//---0
width: floor(3px / 1em);//-----报错
}⑤abs($value)返回一个数的绝对值
.footer {
width:abs(12.3px); //----12.3px
width:abs(-12.3px);//---- 12.3px
width:abs(-1px / 2px);//----2
width:abs(-.5%);//--- 0.5%
}
⑥min()最小值和max()最大值
.footer {
width:max(10px,23px,10,2);
height:min(10px,23px,10,2);
}
编译成css
.footer {
width: 23px;
height: 2;
}
传入list求值时：
$list: (50,45px,299px,93);
.footer {
width:max($list...);
height:min($list...);
}
编译成css
.footer {
width: 299px;
height: 45px;
}
⑧random():获取随机数
3.列表函数
①length($list)返回一个列表的长度值
列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错
>> length(10px) -----1
>> length(10px 20px (border 1px solid) 2em)-----4
>> length(border 1px solid)--------3
>> length(10px,20px,(border 1px solid),2em)----报错
②nth($list, $n)指定某标签值
返回一个列表中指定的某个标签值(1 是指列表中的第一个标签值，2 是指列给中的第二个标签值，依此类推).footer {
background:nth(red green,2);
}
或是
$list:(red green);
.footer {
background:nth($list,2);
}
编译成css
.footer {
background: green;
}
注：在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数
③join($list1, $list2, [$separator])连接成列表
只能将两个列表给连接成一个列表，俩个移上成列表
>> join(10px 20px, 30px 40px)
(10px 20px 30px 40px)
>> join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
//多个列表连接，需要将多个join()函数合并在一起使用：
>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)
除此之外，还有很特别的参数$separator，用来指定列表连接之间的分隔符的，默认为auto，还有comma（逗号）和space（空格）！
④append($list1, $val, [$separator])将某个值放在列表的最后
用来指定列表连接之间的分隔符的，默认为auto，还有comma（逗号）和space（空格）！
>> append((blue green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue green),red,space)
(#0000ff #008000 #ff0000)
>> append(10px 20px ,30px)
(10px 20px 30px)
⑤zip($lists…)合成一个多维的列表
将多个列表结合成一个多维的列表
>> zip(1px 2px 3px,solid dashed dotted,green blue red)
1px "solid" #008000, 2px "dashed" #0000ff, 3px "dotted" #ff0000
在使用zip()函数时，每个单一的列表个数值必须是相同的：
zip()函数组合出来就成了：
1px solid green, 2px dashed blue, 3px dotted red
⑥index($list, $value)返回一个值在列表中的位置值
第一个值就是1，第二个值就是 2，依此类推
>> index(1px solid red, 1px)-----1
>> index(1px solid red, solid)-----2
>> index(1px solid red, red)-----3
在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置。
>> index(1px solid red,dotted) //列表中没有找到 dotted
false
>> index(1px solid red,solid) //列表中找到 solid 值，并且返回他的位置值 2
2
⑦Introspection判断型函数
用来对值做一个判断的作用。
a.type-of($value)返回一个值的类型
number 为数值型。 string 为字符串型。 bool 为布尔型。 color 为颜色型。
type-of(100)或是type-of(100px)----"number"
>> type-of("asdf")或是type-of(asdf)或是type-of(1 / 2 = 1)-----"string"
>> type-of(true)-----"bool"
>> type-of(#fff)或是type-of(blue)----"color"b.unit($number)返回一个值的单位
用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：
>> unit(100)----""
>> unit(100px)----"px"
>> unit(20%)---"%"
>> unit(1em)----"em"
>> unit(10px * 3em)---"em*px"
>> unit(10px / 3em)----"px/em"
>> unit(10px * 2em / 3cm / 1rem)---"em/rem"
>> unit(1px + 1cm)---"px"
>> unit(1px - 1cm)---"px"
>> unit(1px + 1mm)---"px"
>> unit(10px * 2em - 3cm / 1rem)-----报错
>> unit(10px * 3em)---"em*px"
>> unit(10px / 3em)----"px/em"
>> unit(10px * 2em / 3cm / 1rem)---"em/rem"c.unitless($number)是否带有单位
只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false
>> unitless(100px)或是 unitless(100%)或是unitless(1px /2 + 2 )---false
>> unitless(100)或是 unitless(1 /2 )或是unitless(1 /2 + 2 )---true
代码实现：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位。
@mixin adjust-location($x, $y) {
@if unitless($x) {
$x: 1px * $x;
}
@if unitless($y) {
$y: 1px * $y;
}
position: relative;
left: $x;
top: $y;
background:red;
}
.botton{
@include adjust-location(20px, 30);
}
编译过来的CSS：
.botton {
position: relative;
left: 20px;
top: 30px;
background: red;
}
d.comparable($number-1, $number-2)判断两个值是否可以做加、减和合并
主要是用来判断连俩个数是否可以进行“加，减”以及“合并”。如果可以返回的值为true，如果不可以返回的值是false:
到不同单位时，将会报错，除 px 与 cm、mm 运算之外：
>> comparable(2px,1px)或是 comparable(2px,1mm)或是 comparable(2cm,1mm)---true
>> comparable(2px,1%)或是comparable(2px,1em)或是comparable(2rem,1em)----false⑧.Miscellaneous函数
在这里吧Miscellaneous函数称为三元条件函数，主要因为他和JavaScript中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：if($condition,$if-true,$if-false)
上面表达式的意思是当$condition条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。
>> if(true,1px,2px)----1px
>> if(false,1px,2px)----2px
4. 颜色函数
①RGB()颜色函数
A.rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
eg:rgb(200,40,88) //计算出一个十六进制颜色值 #c82858
B.rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色
俩种格式：
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
rgba($color,$alpha)
eg:rgba(#c82858,.65) //根据透明度计算出一个rgba颜色值
rgba(200, 40, 88, 0.65)
C.red($color)：从一个颜色中获取其中红色值；
eg:red(#c82858) //从#c82858颜色值中得到红色值 200
D.green($color)：从一个颜色中获取其中绿色值；
eg: green(#c82858) //从#c82858颜色值中得到绿色值 40
E.blue($color)：从一个颜色中获取其中蓝色值；
eg:blue(#c82858) //从#c82858颜色值中得到蓝色值 88
F.mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。
$weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。
//SCSS
$color1: #a63;
$color2: #fff;
$bgColor1: #f36;
$bgColor2: #e36;
$borderColor1:#c36;
$borderColor2:#b36;
.mix {
background: mix($bgColor1,$bgColor2,.75);
color: mix($color1,$color2,.25);
border-color: mix($borderColor1,$bgColor2,.05);
}
编译的 css 代码：
//CSS
.mix {
background: #ee3366;
color: #fefefe;
border-color: #ed33
}
②HSL()颜色函数
a.hsl($hue,$saturation,$lightness)
通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
eg: hsl(200,30%,60%) //通过h200,s30%，l60%创建一个颜色#7aa3b8
b.hsla($hue,$saturation,$lightness,$alpha)
通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
eg:hsla(200,30%,60%,.8)//通过h200,s30%，l60%,a80%创建一个颜色
rgba(122, 163, 184, 0.8)
c.hue($color)
从一个颜色中获取色相（hue）值；
eg:hue(#7ab)//得到#7ab颜色的色相值 195deg
d.saturation($color)
从一个颜色中获取饱和度（saturation）值；
eg:saturation(#7ab)//得到#7ab颜色的饱和度值 33.33333%
e.lightness($color)
从一个颜色中获取亮度（lightness）值；
eg:lightness(#7ab)//得到#7ab颜色的亮度值 60%
f.adjust-hue($color,$degrees)
通过改变一个颜色的色相值，创建一个新的颜色；
eg:adjust-hue(#f36,150deg) //改变#f36颜色的色相值为150deg
#33ff66
g.lighten($color,$amount)
通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
eg:lighten(#f36,50%) //把#f36颜色亮度提高50%
#ffffff
h.darken($color,$amount)
通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
eg:darken(#f36,50%) //把#f36颜色亮度降低50%
#33000d
i.saturate($color,$amount)
通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
eg:saturate(#f36,50%) //把#f36颜色饱和度提高50%
#ff3366
j.desaturate($color,$amount)
通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
eg:desaturate(#f36,50%) //把#f36颜色饱和度降低50%
#cc667f
k.grayscale($color)
将一个颜色变成灰色，相当于desaturate($color,100%);
eg：grayscale(#f36) //把#f36颜色变成灰色
#999999
l.complement($color)
返回一个补充色，相当于adjust-hue($color,180deg);
eg:complement(#f36)
#33ffcc
m.invert($color)
反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
eg:invert(#f36)
#00cc99
③Opacity()颜色函数
a.alpha($color) /opacity($color)获取颜色透明度值
eg:
.footer {
backfround:alpha(red)或是opacity(red)---1
color:alpha(rgba(red,.8))或是 opacity(rgba(red,.8))----0.8
}
b.rgba($color, $alpha)改变颜色的透明度值
eg:
>> rgba(red,.5)----rgba(255, 0, 0, 0.5)
>> rgba(rgb(34,45,44),.5)----rgba(34, 45, 44, 0.5)
>> rgba(rgba(33,45,123,.2),.5)---rgba(33, 45, 123, 0.5)
>> rgba(hsl(33,7%,21%),.5)-----rgba(57, 54, 50, 0.5)
>> rgba(hsla(33,7%,21%,.9),.5)------rgba(57, 54, 50, 0.5)
c.opacify($color, $amount) / fade-in($color, $amount)使颜色更不透明
eg:
>> opacify(rgba(22,34,235,.6),.5)---#1622eb
>> opacify(hsla(22,34%,23%,.6),.415)----#4f3527
>> opacify(red,.15)----#ff0000
>> fade-in(rgba(23,34,34,.5),.15)----rgba(23, 34, 34, 0.65)
>> fade-in(rgba(23,34,34,.5),.615)------#172222
d.transparentize($color, $amount) / fade-out($color, $amount)使颜色更加透明
eg:
>> transparentize(red,.5)-----rgba(255, 0, 0, 0.5)
>> fade-out(hsla(98,6%,23%,.5),.1)---rgba(58, 62, 55, 0.4)
案例七色卡：https://code.csdn.net/snippets_manage
5.map函数--数据地图
Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。
eg:
$theme-color: (
default: (
color: #2196f3,
text-color: #444,
link-color: #39f
),
primary:(
color: #000,
text-color:#fff,
link-color: #93f
),
negative: (
color: #f36,
text-color: #fefefe,
link-color: #d4e
)
);
@each $keys,$values in $theme-color{
.theme-color-#{$keys}{
@each $key,$value in $values{
#{$key}:#{$value}
}
}
}
编译成css:
.theme-color-default {
color: #2196f3;
text-color: #444;
link-color: #39f;
}
.theme-color-primary {
color: #000;
text-color: #fff;
link-color: #93f;
}
.theme-color-negative {
color: #f36;
text-color: #fefefe;
link-color: #d4e;
}
a.map-get($map,$key)给定的key返回相关的值
函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null
$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
twitter: #55acee
);
.btn-dribble{
color: map-get($social-colors,facebook);
}
编译成css；
.btn-dribble {
color: #3b5998;
}
b.map-merge($map1,$map2)将两个map并成新map
如果你要快速将新的值插入到 $map 中的话，这种方法是最佳方法.$newmap: map-merge($color,$typo);
$color: (
text: #f36,
link: #f63,
border: #ddd,
backround: #fff
);
$typo:(
font-size: 12px,
line-height: 1.6
);
$newmap: map-merge($color,$typo);
.btn-dribble{
color: map-get($newmap,backround);
}
编译：
.btn-dribble {
color: #fff;
}
c.map-remove($map,$key)删除一个key，返回新map
但并不能直接从一个 map 中删除另一个 map，仅能通过删除 map 中的某个 key 得到新 map$map:map-remove($theme-color,color);
$theme-color: (
color: #2196f3,
text-color: #444,
link-color: #39f
);
$map:map-remove($theme-color,color);
.theme-color{
@each $key,$value in $map{
#{$key}:#{$value}
}
}
编译成css:
.theme-color {
text-color: #444;
link-color: #39f;
}
d.map-keys($map)返回map中所有的key
将会返回 $map 中的所有 key。这些值赋予给一个变量，那他就是一个列表：map-keys($social-colors);
$social-colors: (
dribble: #000,
facebook: #333,
twitter: #55acee
);
@function colors($color){
$names: map-keys($social-colors);
@if not index($names,$color){
@warn "Waring: `#{$color} is not a valid color name.`";
}
@return map-get($social-colors,$color);
}
@each $name in map-keys($social-colors){
.btn-#{$name}{
color: colors($name);
}
}
编译成css:
.btn-dribble {
color: #000;
}
.btn-facebook {
color: #333;
}
.btn-twitter {
color: #55acee;
}e.map-values($map)返回map中所有的value
$social-colors: (
dribble: #000,
facebook: #333,
twitter: #55acee
);
将会返回 $map 中的所有value。这些值赋予给一个变量，那他就是一个列表：map-values($social-colors)
f.map-has-key($map,$key)给定的key值判断是否有对应的value
如果有返回 true，否则返回 false。$social-colors: (
dribble: #000,
facebook: #3b5998,
twitter: #55acee
);
@function colors($color){
@if not map-has-key($social-colors,$color){
@warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
}
@return map-get($social-colors,$color);
}
@each $social-network,$social-color in $social-colors {
.btn-#{$social-network} {
color: colors($social-network);
}
}
编译成css:
.btn-dribble {
color: #000;
}
.btn-facebook {
color: #3b5998;
}
.btn-twitter {
color: #55acee;
}
i.自定义一个函数 colors()
ii.facebook 这个 key 已存在 $social-colors 这个 map 当中,能正常编译;如果你手误，将 facebook 输错了,则错。所以需要@if来判断
g.keywords($args)返回一个函数的参数
这个参数可以动态的设置 key 和 value。keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args 变成 key(会自动去掉$符号)，而 $args 对应的值就是value。
@mixin mycolors($args...){
$list: keywords($args);
@each $k,$v in $list{
.btn-#{$k}{
color:$v;
}
}
}
@include mycolors(
$dribble: #ea4c89,
$facebook: #3b5998,
$twitter: #55acee
);
编译成css:
.btn-dribble {
color: #ea4c89;
}
.btn-facebook {
color: #3b5998;
}
.btn-twitter {
color: #55acee;
}
6.自定义函数
SASS允许用户编写自己的函数:@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}