Sass语法(二)之函数

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

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

//SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}
编译出来的 css 代码：

//CSS
.test {
  text: AAAAA;
  text: AA-AAAA-AAA;
}

//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}
编译出来的 css 代码：

//CSS
.test {
  text: aaaaa;
  text: aa-aaaa-aaa;
}

2.数字函数

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


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