SASS與SCSS與CSS差別
css樣式寫法
1
2
3
4
5
6
7
8
9
10
|
.menu{
display: flex;
flex-direction: column;
}
.menu li{
padding: 4px 8px;
}
.menu li a{
color: #333333;
}
|
scss樣式寫法
1
2
3
4
5
6
7
8
9
10
|
.menu{
display: flex;
flex-direction: column;
li{
padding: 4px 8px;
a{
color: #333333;
}
}
}
|
以縮排方式編譯
sass樣式寫法
1
2
3
4
5
6
7
|
.menu
display: flex
flex-direction: column
li
padding: 4px 8px
a
color: #333333
|
少了{}以及;，以縮排方式編譯
@mixin自訂樣式組
sass樣式寫法
1
2
3
4
5
6
7
8
9
|
/*變數設定*/
@mixin greenCube
width: 50px
height: 50px
background-color: #28DF99
/*變數使用*/
.box
+greenCube
|
scss樣式寫法
1
2
3
4
5
6
7
8
9
10
11
|
/*變數設定*/
@mixin greenCube{
width: 50px;
height: 50px;
background-color: #28DF99;
}
/*變數使用*/
.box{
@include greenCube;
}
|
css編譯結果
1
2
3
4
5
|
.box{
width: 50px;
height: 50px;
background-color: #28DF99;
}
|
$自訂常用變數
sass樣式寫法
1
2
3
4
5
6
7
8
9
10
|
/*變數設定*/
$cube_width: 50px
$cube_height: 50px
$color_green: #28DF99
/*變數使用*/
.box
width: $cube_width
height: $cube_height
background-color: $color_green
|
scss樣式寫法
1
2
3
4
5
6
7
8
9
10
11
|
/*變數設定*/
$cube_width: 50px;
$cube_height: 50px;
$color_green: #28DF99;
/*變數使用*/
.box{
width: $cube_width
height: $cube_height
background-color: $color_green
}
|
css編譯結果
1
2
3
4
5
|
.box{
width: 50px;
height: 50px;
background-color: #28DF99;
}
|
@mixin+$混合用法
sass樣式寫法
1
2
3
4
5
6
7
8
9
|
/*變數設定*/
@mixin greenCube($width, $height, $color_green)
width: $width
height: $height
background-color: $color_green
/*變數使用*/
.box
+greenCube(50px,50px,#28DF99)
|
scss樣式寫法
1
2
3
4
5
6
7
8
9
10
11
|
/*變數設定*/
@mixin greenCube($width, $height, $color_green){
width: $width;
height: $height;
background-color: $color_green;
}
/*變數使用*/
.box{
@include greenCube(50px, 50px, #28DF99);
}
|
css編譯結果
1
2
3
4
5
|
.box{
width: 50px;
height: 50px;
background-color: #28DF99;
}
|
sass樣式寫法
1
2
3
4
5
6
7
8
9
10
11
12
|
/*變數設定*/
@mixin X-Small
@media (max-width: 576px)
@content
/*變數使用*/
.box
width: 50px
height: 50px
background-color: green
+X-Small
background-color: red
|
scss樣式寫法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/*變數設定*/
@mixin X-Small{
@media (max-width: 576px){
@content;
}
}
/*變數使用*/
.box{
width: 50px;
height: 50px;
background-color: green;
@include X-Small{
background-color: red;
}
}
|
css編譯結果
1
2
3
4
5
6
7
8
9
10
|
.box{
width: 50px;
height: 50px;
background-color: green;
}
@media (max-width: 576px) {
.box{
background-color: red;
}
}
|
匯入@import
在all.scss使用@import再彙整出all.css
1
2
3
4
5
|
@import "variable"; /*常用變數*/
@import "reset"; /*css reset*/
@import "layout"; /*共同框架，第一層基本架構*/
@import "button"; /*按鈕元件*/
@import "資料夾名稱/檔案名稱";
|
檔名前面加上底線_可以被編譯，但不會被輸出
src/
├─── scss/
│ │
│ ├─── _custom.scss #sass編譯時不會被輸出
│ │
│ └─── all.scss
│
└─── index.html
@import的scss在編譯時會將變數連同帶走
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/*custom.scss*/
$primary-color: blue;
/*all.scss*/
@import 'custom'
.button {
background-color: $primary-color;
}
/*編譯後all.css結果*/
.button {
background-color: blue;
}
|
其他相關