Sass语法(二)之函数

╰+哭是因爲堅強的太久メ 2021-09-14 04:04 520阅读 0赞

# 一.函数 #

## 1.字符串函数-unquote()函数 ##

用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：

unquote($string)：删除字符串中的引号；  
      quote($string)：给字符串添加引号。

### ①unquote($string)删除字符串中的引号 ###

unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。

//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; }

unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。

### ② quote($string)给字符串添加引号 ###

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() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。  
  
.test1 \{  
    content:  quote(Hello Sass);//这样使用，编译器马上会报错。  
\}

解决方案就是去掉空格，或者加上引号：  
  
.test1 \{  
    content:  quote(HelloSass);  
\}  
.test1 \{  
    content:  quote("Hello Sass");  
\}

同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线\_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错.

### ③To-upper-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; }

### ④To-lower-case()将字符串转换成小写字母 ###

To-lower-case() 函数 与 To-upper-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)换成百分比值 ###

将一个不带单位的数转换成百分比值；

.footer\{  
    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的数转换成下一位整数 ###

ceil() 函数将小数大于本身 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()最大值 ###

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()函数时，每个单一的列表个数值必须是相同的：

![Center][]

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() 函数将会报错，除 px 与 cm、mm 运算之外：

>> unit(1px + 1cm)---"px" >> unit(1px - 1cm)---"px" >> unit(1px + 1mm)---"px" >> unit(10px * 2em - 3cm / 1rem)-----报错

unit() 函数对于单位运算相对来说也没有规律，而且有些单位也无法整合成一个单位，对于我们在 CSS 中运用中并不适合，比如：

>> unit(10px * 3em)---"em*px" >> unit(10px / 3em)----"px/em" >> unit(10px * 2em / 3cm / 1rem)---"em/rem"

上面运算出来的单位，对于在 CSS 中使用将是没有任何意义的。

#### 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);  
\}

[Center]: /images/20210813/cb736688b81240bea39865888e846479.png