欧美人妻诱惑系列,伊人久久亚洲中文字幕

Sass自備了一系列的函數(shù)功能，大部分能通過普通的css語句直接調(diào)用。這篇文章會(huì)詳細(xì)介紹Sass的字符串函數(shù)、數(shù)字函數(shù)、列表函數(shù)、Introspection函數(shù)、三元函數(shù)等等，盡量將Sass函數(shù)方面的知識(shí)匯總

【Sass自定義函數(shù)】：http://www.itdecent.cn/p/7f879ce0cbb9

1. 字符串函數(shù)

unquote（$string）：刪除字符串中的引號(hào)；
quote（$string）：給字符串添加引號(hào)；
To-upper-case（$string）：將字符串小寫字母轉(zhuǎn)換為大寫字母
To-lower-case（$string）：將字符串大寫字母轉(zhuǎn)換為小寫字母

（1） unquote（$string）

unquote函數(shù)主要功能是刪除字符串中的引號(hào)：

不管是雙引號(hào)還是單引號(hào)包裹的字符串，引號(hào)皆被去掉；
只能刪除字符串最前邊和最后邊的引號(hào)，沒法去掉中間的引號(hào)；
如果字符串沒有帶引號(hào)，則返回原字符串；
若引號(hào)中，有半個(gè)不成對(duì)的引號(hào)。

//SCSS
.demo1 { content: unquote('Hello Sass') ; }
.demo2 { content: unquote("Hello Sass"); }
.demo3 { content: unquote("Hello' Sass"); }
.demo4 { content: unquote("'Hello Sass'"); }
.demo5 { content: unquote('"Hello Sass"'); }
.demo6 { content: unquote(Hello Sass);}

//CSS
.demo1 { content: Hello Sass; }
.demo2 { content: Hello Sass; }
.demo3 { content: Hello' Sass; }
.demo4 { content: 'Hello Sass'; }
.demo5 { content: "Hello Sass"; }
.demo6 { content: Hello Sass; }

（2） quote（$string）

quote函數(shù)主要功能是給字符串添加引號(hào)：

若字符串本身帶有引號(hào)，就不添加；
若字符串帶有單引號(hào)，則跟換為雙引號(hào)；
若雙引號(hào)中有單引號(hào)，則不變，單引號(hào)不受影響；
若字符串中間有空格或者半塊的單引號(hào)、雙引號(hào)時(shí)，需要用單引號(hào)或雙引號(hào)括起，不然編譯會(huì)報(bào)錯(cuò);
碰到特殊符號(hào)，比如： !、?、> 等，除中折號(hào) - 和下劃線_ 都需要使用雙引號(hào)括起，否則編譯器在進(jìn)行編譯的時(shí)候同樣會(huì)報(bào)錯(cuò)：

//SCSS
.demo1 { content: quote('Hello Sass') ; }
.demo2 { content: quote("Hello Sass"); }
.demo3 { content: quote("Hello' Sass"); }
.demo4 { content: quote("'Hello Sass'"); }
.demo5 { content: quote('"Hello Sass"'); }
.demo6 { content: quote(HelloSass);}

//CSS
.demo1 { content: "Hello Sass"; }
.demo2 { content: "Hello Sass"; }
.demo3 { content: "Hello' Sass"; }
.demo4 { content: "'Hello Sass'"; }
.demo5 { content: '"Hello Sass"'; }
.demo6 { content: "HelloSass"; }

2. 數(shù)字函數(shù)

percentage($value)：將不帶單位的數(shù)轉(zhuǎn)換成百分比值；
round($value)：將數(shù)值四舍五入，轉(zhuǎn)換成一個(gè)最接近的整數(shù)；
ceil($value)：向上取整；
floor($value)：向下取整；
abs($value)：取數(shù)的絕對(duì)值；
min($numbers…)：找出幾個(gè)數(shù)值之間的最小值；
max($numbers…)：找出幾個(gè)數(shù)值之間的最大值；
random(): 獲取隨機(jī)數(shù)
Sass的數(shù)字函數(shù)和JavaScript的Math對(duì)象方法基本相似：

//SCSS
.demo1 {
  width : percentage(.2); //轉(zhuǎn)換成百分比值
  height: percentage(2px / 10px);
  margin: percentage(2em / 10em);
}
.demo2 {
  width: round(12.3px); //四舍五入，兩邊單位不統(tǒng)一會(huì)報(bào)錯(cuò)
  height: round(2px / 3px);
  margin: round(2.2%);
}
.demo3 {
  width: ceil(2.3px); //向上取整
  height: ceil(2px / 3px);
  margin: ceil(2.8%);
}
.demo4 {
  width: floor(2.3px); //向下取整
  height: floor(2px / 3px);
  margin: floor(2.8%);
}
.demo5{
  width: abs(2.3px);  //絕對(duì)值
  height: min(1,2,1%,3,300%); //找出最小值
  margin: max(1px,5px); //找出最大值
  padding:random(); //隨機(jī)數(shù)
}

//CSS
.demo1 {
  width: 20%;
  height: 20%;
  margin: 20%; }

.demo2 {
  width: 12px;
  height: 1;
  margin: 2%; }

.demo3 {
  width: 3px;
  height: 1;
  margin: 3%; }

.demo4 {
  width: 2px;
  height: 0;
  margin: 2%; }

.demo5 {
  width: 2.3px;
  height: 1%;
  margin: 5px;
  padding: 0.4669285352; }

3. 列表函數(shù)

length($list)：返回一個(gè)列表的長(zhǎng)度值;
nth($list, $n)：返回一個(gè)列表中指定的某個(gè)標(biāo)簽值;
join($list1, $list2, [$separator])：將兩個(gè)列給連接在一起，變成一個(gè)列表；
append($list1, $val, [$separator])：將某個(gè)值放在列表的最后；
zip($lists…)：將幾個(gè)列表結(jié)合成一個(gè)多維的列表；
index($list, $value)：返回一個(gè)值在列表中的位置值。

//SCSS
.demo1 {
  width : length(10px);   //返回列表清單中有多少個(gè)值，空格隔開，不能使用逗號(hào)。
  height:  length(border 1px solid)  //同一個(gè)列表里,可以是不同類型、不同單位的值
}
.demo2 {
  width: nth((Helvetica,Arial,sans-serif),2);   //指定列表中某個(gè)位置的值，1是指列表中的第一個(gè)標(biāo)簽值,以此類推。
  height: nth((1px solid red) border-top green,1);
}
.demo3 {
  margin: join((10px 20px),(30px 40px));  //將兩個(gè)列表連接合并成一個(gè)列表,不同列表之間用逗號(hào)隔開。
  padding: append((10px,20px,20px),30px);  //將某個(gè)值插入到列表中，并且處于最末位
  border: zip(1px 2px 3px,solid dashed dotted) ;  //多個(gè)列表值轉(zhuǎn)成一個(gè)多維的列表,每個(gè)單一的列表個(gè)數(shù)值必須是相同
}
.demo4 {
  width: index(1px solid red, 1px);   //返回對(duì)應(yīng)的值在列表中所處的位置,第一個(gè)值就是1,以此類推。
  height:  index(1px solid red, yellow)  //如果指定的值不在列表中，那么返回的值將是false著作權(quán)歸作者所有。
}

//CSS
.demo1 {
  width: 1;
  height: 3;
}
.demo2 {
  width: Arial;
  height: 1px solid red;
}
.demo3 {
  margin: 10px 20px 30px 40px;
  padding: 10px, 20px, 20px, 30px;
  border: 1px solid, 2px dashed, 3px dotted;
}
.demo4 {
  width: 1;
}

4. Introspection函數(shù)

type-of($value)：返回一個(gè)值的類型;
unit($number)：返回一個(gè)值的單位;
unitless($number)：判斷一個(gè)值是否帶有單位;
comparable($number-1, $number-2)：判斷兩個(gè)值是否可以做加、* 減和合并.

//SCSS
.demo1 {
    content:type-of(100);  //判斷一個(gè)值是屬于什么類型
    content:type-of(100px);
    content:type-of(asdf);
    content: type-of(blue);
  }
.demo2 {
  content: unit(10px * 3em);  //獲取一個(gè)值所使用的單位
  content: unit(10px * 2em / 3cm / 1rem);
}
.demo3 {
  content: unitless(100px);  //判斷一個(gè)值是否帶有單位
  content:  unitless(1 /2 + 2 );
}
.demo3 {
  content: comparable(2px,1px);  //斷兩個(gè)數(shù)是否可以進(jìn)行加，減以及合并
  content: comparable(2px,1em);
}

//CSS
.demo1 {
  content: number;
  content: number;
  content: string;
  content: color;
}
.demo2 {
  content: "em*px";
  content: "em/rem";
}
.demo3 {
  content: false;
  content: true;
}
.demo3 {
  content: true;
  content: false;
}

5. 三元條件函數(shù)

if($condition,$if-true,$if-false);

判斷$condition，如果條件成立，則返回$if-true的結(jié)果，如果條件不成立，則返回$if-false的結(jié)果。

//SCSS
.demo1{width:if(true,8em,20em)}
.demo2{height:if(false,8em,20em)}

//CSS
.demo1 { width: 8em;}
.demo2 {height: 20em;}

6.Maps的函數(shù)

map-get($map,$key)：根據(jù)給定的 key 值，返回 map 中相關(guān)的值；
map-has-key($map,$key)：根據(jù)給定的 key 值判斷 map 是否有對(duì)應(yīng)的 value 值，如果有返回 true，否則返回 false。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value。
map-merge($map1,$map2)：將兩個(gè) map 合并成一個(gè)新的 map。
map-remove($map,$key)：從 map 中刪除一個(gè) key，返回一個(gè)新 map。
keywords($args)：返回一個(gè)函數(shù)的參數(shù)，這個(gè)參數(shù)可以動(dòng)態(tài)的設(shè)置 key 和 value。

Sass中map的形式如下：
用 $ 加上命名空間來聲明 map，后面緊接是一個(gè)小括號(hào) ()，將數(shù)據(jù)以 key:value 的形式賦予，key 和 value 是成對(duì)出現(xiàn)。

$map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
)

對(duì)應(yīng)的一些例子：

//SCSS
$colors: (//$map
        redColor: #FF2C60, // $key:value
        greenColor:#168009,
        blueColor:#7BA5FF
);

@if map-has-key($colors, meat) {  //當(dāng) $map 中有這個(gè) $key，則函數(shù)返回 true，否則返回 false。
  div {
    color: map-get($colors, redColor);   //根據(jù) $key 參數(shù)，返回 $key 在 $map 中對(duì)應(yīng)的 value 值。
    color: map-get($colors, yellowColor);   //如果 $key 不存在 $map中，將返回 null 值,并且不會(huì)把css編譯出來。
  }
} @else {
  div {
    color: green
  }
}

.btn-#{nth(map-keys($colors),1)} {     //函數(shù)將會(huì)返回 $map 中的所有 key,并通過nth（）獲取某值
  color: nth(map-values($colors), 2);   //函數(shù)將會(huì)返回 $map 中的所有 value,并通過nth（）獲取某值
}

$div1: (
        text: #f36,
        link: #f35,
        border: #384
);
$div2: (
        width:300px,
        height:100px,
        z-index:3
);
$newMap: map-merge($div1, $div2);   //map-merge($map1,$map2) 函數(shù)是將 $map1 和 $map2 合并，然后得到一個(gè)新的 $map。
div {
  @each $x, $y in $newMap {
    #{$x}: #{$y};
  }
}

$newMap: map-remove($div1, link);   // 用來刪除當(dāng)前 $map 中的某一個(gè) $key，從而得到一個(gè)新的 map。其返回的值還是一個(gè) map。
div {
  @each $x, $y in $newMap {
    #{$x}: #{$y};
  }
}

//CSS
div {
  color: green;
}

.btn-redColor {
  color: #168009;
}

div {
  text: #f36;
  link: #f35;
  border: #384;
  width: 300px;
  height: 100px;
  z-index: 3;
}

div {
  text: #f36;
  border: #384;
}

7.顏色函數(shù)

rgb($red,$green,$blue)：根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色；
rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色；
red($color)：從一個(gè)顏色中獲取其中紅色值；
green($color)：從一個(gè)顏色中獲取其中綠色值；
blue($color)：從一個(gè)顏色中獲取其中藍(lán)色值；
mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。

//SCSS
.demo1 {
  color: rgb(100, 148, 210);   //根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色,輸入的是三個(gè)0-255之間的數(shù)字值
  background-color: rgba(255, 43, 75, 0.8);   //根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色

}
.demo2 {
  content: red(#f36);   //從一個(gè)顏色中獲取其紅色值
  @if red(#f36) > 50 {   //當(dāng)顏色的紅色值大于50使用白色，否則使用黑色
    color: #fff;
  } @else{
    color: #000;
  }
}
.demo3 {
  color:mix(#f00, #00f);   //把兩種顏色按照一定的比例混合在一起
  color: mix(#f00, #00f, 25%)
}

//CSS
.demo1 {
  color: #6494d2;
  background-color: rgba(255, 43, 75, 0.8);
}
.demo2 {
  content: 255;
  color: #fff;
}
.demo3 {
  color: purple;
  color: #4000bf;
}

8.自定義函數(shù)

考慮到Sass自定義函數(shù)用到地方比較多，并且后續(xù)需要單獨(dú)拿出來和Mixin、extend進(jìn)行比較，所以另開篇幅了
【Sass自定義函數(shù)】：http://www.itdecent.cn/p/7f879ce0cbb9

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Sass函數(shù)功能匯總

Sass函數(shù)功能匯總

1. 字符串函數(shù)

（1） unquote（$string）

（2） quote（$string）

2. 數(shù)字函數(shù)

3. 列表函數(shù)

4. Introspection函數(shù)

5. 三元條件函數(shù)

6.Maps的函數(shù)

7.顏色函數(shù)

8.自定義函數(shù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Sass函數(shù)功能匯總

1. 字符串函數(shù)

（1） unquote（$string）

（2） quote（$string）

2. 數(shù)字函數(shù)

3. 列表函數(shù)

4. Introspection函數(shù)

5. 三元條件函數(shù)

6.Maps的函數(shù)

7.顏色函數(shù)

8.自定義函數(shù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av