Ziwen

程式學習筆記

【觀念 07】紀錄一些 SASS、SCSS 基本用法

SASS/SCSS

Sass (Syntactically Awesome Stylesheets) 在發展的過程中,衍生出兩種語法,所以蠻常會看到 Sass/SCSS,分別為兩種副檔名 .scss 和 .sass。

副檔名 .scss 是目前主流使用,副檔名 .sass 則是較舊的版本,在一般情況下會通稱為 Sass。

兩者比較明顯的差異在於:

  1. SASS 把 {} 和 ; 都省略了,排版上要特別注意。

  2. SASS 不像 SCSS 也可以使用原生 CSS。

SCSS 常見用法:

  1. 具有巢狀結構。
1
2
3
4
5
6
.outer {
width: 10px;
.inner {
width: 20%;
}
}
  1. 可以使用 $ 宣告變數。
1
2
3
4
5
$white : #fff; 

div {   
color : $white; // #fff
}
  1. & 可以代表父元素。
1
2
3
4
5
6
.btn {
font-size: 16px;
&:hover {
box-shadow: 1px 1px 5px $white;
}
}
  1. 使用 #{} 將變數嵌入字串中。
1
2
3
4
5
$side : right;
→ 使用:
.rounded {    
margin-#{$side}: 5px;  
}
  1. 可以使用 + - * /。
1
2
3
.box {    
margin: (20px/2); // 10px
}
  1. % 宣告類別。
1
2
3
4
5
6
7
8
%btn-style {
width: 20px;
color: $red;
}
使用>>
.btn {
@extend %btn-style ;
}
  1. 使用 @mixin 進行宣告。
1
2
3
4
5
6
7
8
9
10
$num: 100px;
@mixin userAvatar($num) {
width: #{$num}px;
height: 50px;
border-radius: 50%;
}
使用>>
.step {
@include userAvatar(可放變數);
}

參考資料: