scss基本使用及操作函數

操作函數

1、for循環

• @for … from … through

 @for $var from <start> through <end> // 范圍包括<start>和<end>的值

• @for … from … to

@for $var from <start> to <end> // 范圍包括<start>,不包括<end>的值

• 獲取數組中第i項的值 nth($arr, $i)
• 獲取指定鍵值 map-get(nth($arr, $i), $key)

/*** scss ***/
$arr: (
  (theme: dark, size: 40px),
  (theme: light, size: 32px)
);
@for $i from 1 through length($arr) {  // 遍歷數組
  $item: nth($arr, $i);  // 獲取數組中第i項的值

  .#{map-get($item, theme)} {
    width: map-get($item, size);  // 獲取指定鍵值
    height: map-get($item, size);
  }
}

/*** css ***/
.dark {
  width: 40px;
  height: 40px;
}
.light {
  width: 32px;
  height: 32px;
}

2、each

• @each $var in <list or map>

/*** scss ***/
$name: "aa", "bb";  //注意數組list的寫法
@each $i in $name {
    div.#{$i} {
        width: 100px;
    }
}

$name2: (name1: "span", name2: "div");  //注意對象map的寫法
@each $i in $name2 {
    .#{$i} {
        width: 20px;
    }
}

$name3: (name11: 2, name22: 3);  //注意對象map的寫法
@each $key, $value in $name3 {
    .#{$key} {
        width: 10px * $value;
    }
}

/*** css ***/
div.aa {
  width: 100px;
}
div.bb {
  width: 100px;
}

.name1 span {
  width: 20px;
}
.name2 div {
  width: 20px;
}

.name11 {
  width: 20px;
}
.name22 {
  width: 30px;
}

3、while

/*** scss ***/
$i: 2;
@while $i > 0 {
    .color#{$i} {
        color: #222 * $i;
    }
    $i:$i - 1; //注意: 不能寫成$i:$i-1,因為會被當成字符串
}

/*** css ***/
.color2 {
  color: #444444;
}
.color1 {
  color: #222222;
}

4、if

• if … if …
• if … else if …

• if … else if … else …

  注：不支持 if … else …

/*** scss ***/
$width1: 100px;
$width2: 200px;
div {
    @if $width2 > $width1 {
        width: $width1;
    }
}

5、extend

• 繼承目標選擇器的所有相關樣式
• 用!optional直接跳過空樣式, 防止繼承不存在的樣式出錯

/*** scss ***/
.aa {
    margin: 0 auto;
}
div .aa {
    color: red;
}
.aa p {
    margin: 100px;
}

.bb {
    @extend .aa;
}
.cc {
    @extend .dd!optional;  // 用optional,防止.dd不存在而導致的編譯報錯
}

/*** css ***/
.aa, .bb {
  margin: 0 auto;
}
div .aa, div .bb {
  color: red;
}
.aa p, .bb p {
  margin: 100px;
}

6、mixin

• 不帶參數

/*** scss ***/
@mixin aa {
    margin: 10px;
}
.bb {
    @include aa;
}

/*** css ***/
.bb {
  margin: 10px;
}

• 帶參數：參數為數組

/*** scss ***/
$margin: 100px;
$left: 10px;
@mixin aa($left, $margin) {
    margin: $margin;
    left: $left;
}
.bb {
    @include aa($left, $margin);
}

/*** css ***/
.bb {
  margin: 100px;
  left: 10px;
}

• 帶參數：參數為對象
  接收傳遞的參數必須是對象相對應key,同時需要用…傳遞參數

/*** scss ***/
$map: (left: 10px, width: 100px);
@mixin aa($left, $width) {  // 接收參數為key值
    left: $left;
    width: $width;
}
div {
    @include aa($map...);  // 傳遞參數為對象名+...
}

/*** css ***/
div {
  left: 10px;
  width: 100px;
}

• 默認參數

@mixin aa($left: 10px){}  // 不傳參數的話就用默認參數

• 不定參數

/*** scss ***/
@mixin box-shadow($shadows...) {  //不定參數,用...
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}
.shadows {
  @include box-shadow(2px 2px 2px #eee);
}

/*** css ***/
.shadows {
  -moz-box-shadow: 2px 2px 2px #eee;
  -webkit-box-shadow: 2px 2px 2px #eee;
  box-shadow: 2px 2px 2px #eee;
}

7、function

/*** scss ***/
$width: 20px;
@function fun($width) {
    @return $width * 2;
}
div {
    width: fun($width);
}

/*** css ***/
div {
  width: 40px;
}

基本使用

1、定義變量及變量使用

• 常規使用 $var
• 拼字符串 #{$var}
• 用於計算 $var + $var

/*** scss ***/
$width: 1px;
$width2: 2px;
$pos: bottom;

.aa {
    width: $width;  // 常規使用
    border-#{$pos}: 1px solid red;  // 拼字符串
}
.bb {
    width: $width + $width2;  // 用於計算
}

/*** css ***/
.aa {
  width: 1px;
  border-bottom: 1px solid red;
}
.bb {
  width: 3px;
}

2、嵌套

• 選擇器嵌套
• 屬性嵌套

// 選擇器嵌套
div{  
    color: red;
    p {
    color: green;
    }
    &:hover{
        color: blue;
    }
}

// 屬性嵌套
.div{  
//注：嵌套屬性后面必須寫冒號 如：border：
  border: { style: solid;
    left: { width: 4px;
      color: #888;
    }
  }
}

3、 繼承

SASS允許一個選擇器，繼承另一個選擇器。 @extend 要繼承的選擇器

.class1{
    border: 1px solid #ddd;   
}
.class2{
    @extend .class1;
    color: #000;
}

4、 Mixin

Mixin有點像C語言的宏（macro），是可以重用的代碼塊。

//使用@mixin 定義一個可重用的代碼段
@mixin left {
    float: left;
    margin-left: 10px;
}
//使用@include 調用
div{
    @include left;
}

mixin的強大之處，在於可以指定參數和缺省值。使用的時候，根據需要加入參數。

@mixin left($value: 10px) {
　　float: left;
　　margin-right: $value;
}
div {
　　@include left(20px);
}

5、顏色函數

lighten(#cc3, 10%);  //顏色變淺
darken(#cc3, 10%);   //顏色加深
grayscale(#cc3);     //灰度
complement(#cc3);    //反色

6、注釋

SASS共有兩種注釋風格。 標准的CSS注釋 /* comment */ ，會保留到編譯后的文件。 單行注釋 //
comment，只保留在SASS源文件中，編譯后被省略。
在/*后面加一個感嘆號，表示這是”重要注釋”。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於聲明版權信息。

7、插入文件

@import "path/filename.scss";
@import "foo.css";

8、編譯風格

nested：嵌套縮進的css代碼，它是默認值。
expanded：沒有縮進的、擴展的css代碼。
compact：簡潔格式的css代碼。
compressed：壓縮后的css代碼。

9、List（相當於js中的數組）

定義列表

$list: 'item-1', 'item-2', 'item-3'; //（推薦）

$list-space1: 'item-1'  'item-2'  'item-3';
$list-space2: ('item-1'  'item-2'  'item-3');
$list-space3: ('item-1', 'item-2', 'item-3');

注：1、在Scss中括號不是用來創建列表（除非是空的列表），而是用來做為分隔符
2、和CSS一樣，只要沒有特殊字符，列表項的引號是可以省略的

列表嵌套

$list: ( 
  ('item-1.1', 'item-1.2', 'item-1.3'), 
  ('item-2.1', 'item-2.2', 'item-2.3'), 
  ('item-3.1', 'item-3.2', 'item-3.3')
);  //（推薦）

$list:  'item-1.1' 'item-1.2' 'item-1.3',
        'item-2.1' 'item-2.2' 'item-2.3',
        'item-3.1' 'item-3.2' 'item-3.3';

列表索引是從1開始

列表長度length($list)

獲取列表項nth($list, 1)

10、Map（相當於js中的json）

map: (
    (theme: dark, size: 40px),
    (theme: light, size: 32px)
);

map-keys($map) 返回map里面所有的key(list)

map-values($map) 返回map里面所有的value(list)

map-get($map, key) 返回map里面指定key的value