SCSS進(jìn)階

1. @if

@mixin blockOrHidden($boolean:true) {//定義一個(gè)混合宏
  @if $boolean {//根據(jù)混合宏參數(shù)的值來(lái)判斷執(zhí)行哪一塊
    @debug "$boolean is #{$boolean}";
      display: block;//參數(shù)為真桩皿，顯示
    }
    @else {
      @debug "$boolean is #{$boolean}";
      display: none;//參數(shù)為假艾恼，不顯示
    }
}
.block {
  @include blockOrHidden;
}
.hidden{
  @include blockOrHidden(false);
}

編譯出來(lái)的css：

.block {
  display: block;
}
.hidden {
  display: none;
}

2.@for

@for $i from 起始值 through 結(jié)束值  //包括結(jié)束值
@for $i from 起始值 to 結(jié)束值  //不包括結(jié)束值

$i 表示變量

使用through的例子：

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

編譯出來(lái)的css：

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

使用to的例子：

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

編譯出來(lái)的css：

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

@for 循環(huán)在網(wǎng)絡(luò)系統(tǒng)生成各個(gè)格子class的代碼：

$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

編譯出來(lái)的css：

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.span4 {
  width: 300px;
}
.span5 {
  width: 380px;
}
.span6 {
  width: 460px;
}
.span7 {
  width: 540px;
}
.span8 {
  width: 620px;
}
.span9 {
  width: 700px;
}
.span10 {
  width: 780px;
}
.span11 {
  width: 860px;
}
.span12 {
  width: 940px;
}

3. @while 循環(huán)

$types: 4;
$type-width: 20px;
@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

編譯出來(lái)的css：

.while-4 {
  width: 24px;
}
.while-3 {
  width: 23px;
}
.while-2 {
  width: 22px;
}
.while-1 {
  width: 21px;
}

4.@each

$list: adam john wynn mason kuroir;//$list 就是一個(gè)列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

編譯出來(lái)的css：

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

5. sass函數(shù)

5.1 字符串函數(shù)

5.1.1 unquote() 和 quote()

unquote($string):刪除字符串中的引號(hào)杂曲，只能刪除最外層的引號(hào)行冰，不能刪除里層的引號(hào)；如果原字符串不包含引號(hào)奉芦，則返回原字符串坯汤；
quote($string):給字符串添加引號(hào)瘾晃；如果自帶引號(hào)了就會(huì)同意換成雙引號(hào)。如果字符串中間有單撇號(hào)或者空格或者特殊符號(hào)（腮出！帖鸦、？胚嘲、>等除了中折號(hào)-和下劃線_）時(shí)作儿，就要自行用單引號(hào)或者雙引號(hào)括起來(lái)，否則會(huì)報(bào)錯(cuò)馋劈。

.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    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：

.test1 {
  content: Hello Sass!; }
.test2 {
  content: 'Hello Sass!; }
.test3 {
  content: I'm Web Designer; }
.test4 {
  content: 'Hello Sass!'; }
.test5 {
  content: "Hello Sass!"; }
.test6 {
  content: Hello Sass; }

.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}

編譯出來(lái)的css：

.test1 {
  content: "Hello Sass!";
}
.test2 {
  content: "Hello Sass!";
}
.test3 {
  content: "ImWebDesigner";
}
.test4 {
  content: "";
}

5.1.2 To-upper-case()攻锰、To-lower-case()

To-upper-case() 函數(shù)將字符串小寫字母轉(zhuǎn)換成大寫字母。

.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}

編譯后的css：

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

To-lower-case() 函數(shù)將字符串轉(zhuǎn)換成小寫字母妓雾。

.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

編譯后的css：

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

5.2 數(shù)字函數(shù)

percentage($value)：將一個(gè)不帶單位的數(shù)轉(zhuǎn)換成百分比值娶吞；

percentage(.2)//20%
percentage(2px / 10px)//20%
percentage(2em / 10em)//20%

round($value)：將數(shù)值四舍五入，轉(zhuǎn)換成一個(gè)最接近的整數(shù)械姻；

.footer {
   width:round(12.3px)//12px;
}

ceil($value)：將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)妒蛇；
floor($value)：將一個(gè)數(shù)去除他的小數(shù)部分；
abs($value)：返回一個(gè)數(shù)的絕對(duì)值；
min($numbers…)：找出幾個(gè)數(shù)值之間的最小值(參數(shù)中的單位要相同）绣夺；

min(1,2,1%,3,300%)//1%
min(1px,2,3px)//1px
min(1em,2em,6em)//1em
min(1%,2px);//錯(cuò)誤
min(1px,2em);//錯(cuò)誤

max($numbers…)：找出幾個(gè)數(shù)值之間的最大值(參數(shù)中的單位要相同）吏奸；
random(): 獲取隨機(jī)數(shù)。

5.3 列表函數(shù)

length($list)：返回一個(gè)列表的長(zhǎng)度值陶耍；函數(shù)中的列表參數(shù)之間使用空格隔開(kāi)奋蔚，不能使用逗號(hào)，否則函數(shù)將會(huì)出錯(cuò)烈钞；

length(10px)//1
length(10px 20px (border 1px solid) 2em)//4
length(border 1px solid)//3

nth($list, $n)：返回一個(gè)列表中指定的某個(gè)標(biāo)簽值,索引值1就是列表的第一個(gè)值旺拉，而不是索引值0是第一個(gè)值，所以$n必須是大于0的整數(shù)棵磷；

nth(10px 20px 30px,1)//10px
nth((Helvetica,Arial,sans-serif),2)//"Arial"
nth((1px solid red) border-top green,1)//(1px "solid" #ff0000)

join($list1, $list2, [$separator])：將兩個(gè)列給連接在一起蛾狗，變成一個(gè)列表评雌；join() 只能將兩個(gè)列表連接成一個(gè)列表洲敢，如果直接連接兩個(gè)以上的列表將會(huì)報(bào)錯(cuò)；如果要連接多個(gè)列表浴滴，可以用多個(gè)join算吩。[$separator]是指定列表項(xiàng)之間的分隔符留凭，默認(rèn)值是auto，使用時(shí)最好指定這個(gè)參數(shù)偎巢，可選項(xiàng)有“comma”（逗號(hào)）和“space”（空格）

join(blue,red,comma)//(#0000ff, #ff0000)
join(blue,red,space)//(#0000ff #ff0000)
join((blue green),(red,orange),comma)//(#0000ff, #008000, #ff0000, #ffa500)
 join((blue green),(red,orange),space)//(#0000ff #008000 #ff0000 #ffa500)
join((blue, green),(red,orange),comma)//(#0000ff, #008000, #ff0000, #ffa500)
join((blue, green),(red,orange),space)//(#0000ff #008000 #ff0000 #ffa500)
join(blue,(red,orange),comma)//(#0000ff, #ff0000, #ffa500)
join(blue,(red,orange),space)//(#0000ff #ff0000 #ffa500)
join(blue,(red orange),comma)//(#0000ff, #ff0000, #ffa500)
join(blue,(red orange),space)//(#0000ff #ff0000 #ffa500)

append($list1, $val, [$separator])：將某個(gè)值放在列表的最后蔼夜；$separator指定分隔符，如果沒(méi)有指定分隔符压昼，默認(rèn)值是auto求冷，按照原來(lái)列表的分隔符分隔∏舷迹可以用“comma”或者“space”指定分隔符為逗號(hào)或者空格匠题。

append((blue green),red,comma)//(#0000ff, #008000, #ff0000)
append((blue green),red,space)//(#0000ff #008000 #ff0000)
append((blue, green),red,comma)//(#0000ff, #008000, #ff0000)
append((blue, green),red,space)//(#0000ff #008000 #ff0000)
append(blue,red,comma)//(#0000ff, #ff0000)
append(blue,red,space)//(#0000ff #ff0000)

zip($lists…)：將幾個(gè)列表結(jié)合成一個(gè)多維的列表；在使用zip()函數(shù)時(shí)但金，每個(gè)單一的列表個(gè)數(shù)值必須是相同的：

zip(1px 2px 3px,solid dashed dotted,green blue red)
//((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

index($list, $value)：返回一個(gè)值在列表中的位置值,如果指定的值不在列表中（沒(méi)有找到相應(yīng)的值）韭山，那么返回的值將是 false;

index(1px solid red, 1px)//1
index(1px solid red, solid)//2
index(1px solid red, red)//3

5.4 判斷型函數(shù)

type-of($value)：返回一個(gè)值的類型
number 為數(shù)值型。
string 為字符串型冷溃。
bool 為布爾型钱磅。
color 為顏色型。
unit($number)：返回一個(gè)值的單位似枕，乘除運(yùn)算允許多個(gè)單位組合盖淡，加減運(yùn)算不同單位會(huì)出錯(cuò)（除px與cm,mm運(yùn)算之外）；

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)//error
unit(10px * 2em - 1px / 1rem)//error
unit(1px - 1em)//error
unit(1px - 1rem)//error
unit(1px - 1%)//error
unit(1cm + 1em)//error

unitless($number)：判斷一個(gè)值是否帶有單位菠净，如果不帶單位返回的值為 true禁舷，帶單位返回的值為 false;
comparable($number-1, $number-2)：判斷兩個(gè)值是否可以做加彪杉、減和合并，如果可以返回的值為 true牵咙，如果不可以返回的值是 false派近；

5.5 三元條件函數(shù)

if($condition,$if-true,$if-false)//$condition為真，返回$if-true洁桌，$condition為假渴丸，返回$if-false;

6.Map

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

map還可以嵌套，將其中一個(gè)key作為map：

$map: (
    key1: value1,
    key2: (
        key-1: value-1,
        key-2: value-2,
    ),
    key3: value3
);

6.1 map的函數(shù)

map-get($map,$key)：根據(jù)給定的 key 值另凌，返回 map 中相關(guān)的值谱轨，如果 $key 不在 $map 中，在 Sass 中吠谢，返回 null 值土童，不會(huì)編譯出 CSS。

$social-colors: (//定義一個(gè)map工坊，名字叫做social-colors
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);//在$social-colors中找"facebook"作為color的值
}

編譯為：

.btn-dribble {
  color: #3b5998;
}

map-merge($map1,$map2)：將兩個(gè) map 合并成一個(gè)新的 map献汗，如果 $map1 和 $map2 中有相同的 $key 名，那么將 $map2 中的 $key 會(huì)取代 $map1 中的

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6
);
$newmap: map-merge($color,$typo);

將會(huì)生成一個(gè)新的 map:

$newmap:(
    text: #f36,
    link: #f63,
    border: #ddd,
    background: #fff,
    font-size: 12px,
    line-height: 1.6
);

map-remove($map,$key)：從 map 中刪除一個(gè) key王污，返回一個(gè)新 map罢吃，如果刪除的 key 并不存在于 $map 中，那么 map-remove() 函數(shù)返回的新 map 和以前的 map 一樣昭齐。
map-keys($map)：返回 map 中所有的 key尿招，如果把這些值賦予給一個(gè)變量，那就是一個(gè)列表阱驾；

$list: map-keys($social-colors);

相當(dāng)于：

$list:"dribble","facebook","github","google","twitter";

map-values($map)：返回 map 中所有的 value就谜。
map-has-key($map,$key)：根據(jù)給定的 key 值判斷 map 是否有對(duì)應(yīng)的 value 值，如果有返回 true啊易，否則返回 false吁伺。

@if map-has-key($social-colors,facebook){
    .btn-facebook {
        color: map-get($social-colors,facebook);
    }
} @else {
    @warn "No color found for faceboo in $social-colors map. Property ommitted."
}

假設(shè)“facebook”存在$social-colors中，則編譯出來(lái)：

.btn-fackbook{
    color: #3b5998;
}

如果把facebook打成了faceboo租谈，不會(huì)編譯出對(duì)應(yīng)的css，但在命令終端可以看到提示信息：

WARNING: No color found for faceboo in $social-colors map. Property ommitted.
         on line 25 of test.scss

可以自定義一個(gè)函數(shù)：

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

使用這個(gè)函數(shù)：

.btn-dribble {
    color: colors(dribble);
}
.btn-facebook {
    color: colors(facebook);
}
.btn-github {
    color: colors(github);
}

編譯出來(lái)的css：

.btn-dribble {
  color: #ea4c89;
}
.btn-facebook {
  color: #3b5998;
}
.btn-github {
  color: #171515;
}

keywords($args)：返回一個(gè)函數(shù)的參數(shù)捆愁，這個(gè)參數(shù)可以動(dòng)態(tài)的設(shè)置 key 和 value割去。

7. 顏色函數(shù)

7.1 RGB顏色函數(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])：把兩種顏色混合在一起切平。

7.2HSL函數(shù)

lighten() 和darken()

$baseColor: #ad141e;
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}

7.3 Opacity函數(shù)

alpha($color) /opacity($color)：獲取顏色透明度值；
rgba($color, $alpha)：改變顏色的透明度值辐董；
opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明悴品；
transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。

最后編輯于：2017.12.04 07:17:48

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末简烘，一起剝皮案震驚了整個(gè)濱河市苔严，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌孤澎，老刑警劉巖届氢，帶你破解...
沈念sama閱讀 206,482評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異覆旭，居然都是意外死亡退子，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,377評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門姐扮，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)絮供，“玉大人，你說(shuō)我怎么就攤上這事茶敏∪腊校” “怎么了？”我有些...
開(kāi)封第一講書人閱讀 152,762評(píng)論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵惊搏，是天一觀的道長(zhǎng)贮乳。經(jīng)常有香客問(wèn)我，道長(zhǎng)恬惯，這世上最難降的妖魔是什么向拆？我笑而不...
開(kāi)封第一講書人閱讀 55,273評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮酪耳，結(jié)果婚禮上浓恳，老公的妹妹穿的比我還像新娘。我一直安慰自己碗暗，他們只是感情好颈将，可當(dāng)我...
茶點(diǎn)故事閱讀 64,289評(píng)論 5贊 373
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著言疗，像睡著了一般晴圾。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上噪奄，一...
開(kāi)封第一講書人閱讀 49,046評(píng)論 1贊 285
城市分裂傳說(shuō)
那天死姚，我揣著相機(jī)與錄音人乓，去河邊找鬼。笑死都毒，一個(gè)胖子當(dāng)著我的面吹牛色罚，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播温鸽，決...
沈念sama閱讀 38,351評(píng)論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼保屯，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了涤垫？” 一聲冷哼從身側(cè)響起姑尺，我...
開(kāi)封第一講書人閱讀 36,988評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蝠猬，沒(méi)想到半個(gè)月后切蟋，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,476評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡榆芦，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,948評(píng)論 2贊 324
?白月光啟示錄
正文我和宋清朗相戀三年柄粹，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片匆绣。...
茶點(diǎn)故事閱讀 38,064評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡驻右，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出崎淳，到底是詐尸還是另有隱情堪夭，我是刑警寧澤，帶...
沈念sama閱讀 33,712評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布拣凹，位于F島的核電站森爽，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏嚣镜。R本人自食惡果不足惜爬迟，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,261評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望菊匿。院中可真熱鬧付呕，春花似錦、人聲如沸跌捆。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 30,264評(píng)論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)疹蛉。三九已至，卻和暖如春力麸，著一層夾襖步出監(jiān)牢的瞬間可款，已是汗流浹背育韩。一陣腳步聲響...
開(kāi)封第一講書人閱讀 31,486評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留闺鲸，地道東北人筋讨。一個(gè)月前我還...
沈念sama閱讀 45,511評(píng)論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像摸恍，于是被迫代替她去往敵國(guó)和親悉罕。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,802評(píng)論 2贊 345

SCSS進(jìn)階

1. @if

2.@for

3. @while 循環(huán)

4.@each

5. sass函數(shù)

5.1 字符串函數(shù)

5.1.1 unquote() 和 quote()

5.1.2 To-upper-case()攻锰、To-lower-case()

5.2 數(shù)字函數(shù)

5.3 列表函數(shù)

5.4 判斷型函數(shù)

5.5 三元條件函數(shù)

6.Map

6.1 map的函數(shù)

7. 顏色函數(shù)

7.1 RGB顏色函數(shù)

7.2HSL函數(shù)

7.3 Opacity函數(shù)

推薦閱讀更多精彩內(nèi)容