kinanson的技術回憶

其實用scss也有兩三年了，但其實都沒有深入去探討過到底有多少用法，幾乎只有用到變數和巢狀跟mixin而已，所以想說還是自己筆記一下，並好好的去看一下scss有什麼比較好的用法，方便自己以後備查。

導覽

1. 變數(variable)
2. 巢狀(nesting)
3. 引用(import)
4. 重用代碼(mixin)
5. 繼承其他樣式(Extend)
6. 運算(Operators)
7. 條件判斷式(if else)
8. 結論

變數(variable)

一個網站常常有一個基本的底色，這樣才會一致，那我們就可以把一些顏色定義為變數，在該使用的地方直接使用變數就好了，以後想要改顏色只要改變數即可
 

$info:#B9CAD4;
$error:red;
$success:#064B74;
.info-area {
  color: $info;
  border: 1px solid $success;
}

我們可以設定多個同樣的變數，然後用default來決定使用哪一個
 

$error:red;
$error:pink !default;

其實變數還有類似陣列(llist)和對象(map)的，但我目前覺得使用此類變數不是很理想，可讀性並不是那麼的好，所以不做此類筆記。

巢狀(nesting)

原本css要套用多種樣式，會寫得比較麻煩，可能會如下

a {
  text-decoration: none;
  color: #7F7F7F;
}
a:hover {
  color: #474646;
}

如果用巢狀的方式，可以簡化成如下

a {
  text-decoration: none;
  color: #7F7F7F;
  :hover {
    color: #474646;
  }
}

引用(import)

其實就是把別支的js，import進一支，比如說我可以把mixin和variable分成不同支，最後再用成一支，而且在scss編譯後會只編譯成一支css檔

@import 'reset.scss';
@import 'mixin.scss';
@import 'variable.scss';

重用代碼(mixin)

類似我們使用方法的方式，而且可以傳入參數來取代，但是沒有回傳值的

@mixin setWidth($width) {
  min-width: $width;
  box-sizing: border-box;
}
.algo {
  @include setWidth(100px);
}

想當然的我們的參數是可以有預設值的

@mixin setWidth($width:50px) {
  min-width: $width;
  box-sizing: border-box;
}
.algo {
  @include setWidth();
}

繼承其他樣式(Extend)

我們可以直接使用即有的樣式，來為我們新增加的樣式直接重用

.setWidth {
  min-width: 100px;
  box-sizing: border-box;
}
.algo {
  @extend .setWidth;
  border:1px solid black;
}

運算(Operators)

scss可以允許我們對數值做運算

article {
  float: left;
  width: 600px / 960px * 100%;
}

條件判斷式(if else)

這個我只能想到判斷變數和多種尺寸的時候用得到，比如說某個區塊當顏色是哪種的時候，字體就要相對應改大小

$error:red;
$error:pink !default;
.info-area {
  color: $info;
  @if $error==red {
    font-size: 16px;
  }
  @else if $error=='pink' {
    font-size: 18px;
  }
  @else {
    font-size: 20px;
  }
}

結論

因為筆者算是初階的css等級而已，所以雖然scss裡面也有for和each比較高級的用法，但我想scss這些特性應該很足夠我使用了，所以我就不筆記比較程式語法進階用法。