Ga Tech

1.01 everyday

Scss 基本觀念

紀錄 Scss 基本觀念。

注解

// comments 雙斜線在經過 Scss compile 之後,不會在 css 裡面顯示。
/* comments */ 單斜線經過 Scss compile 之後,仍會以 /* comments */ 這種注解方式顯示於 css。

@import 時機

在 css 時,通常會避免使用 @import,因為browser 預設會同時下載多份 css(無法像排隊方式下載),必須等到所有 css 都下載完畢,頁面才會正確顯示,如此一來就會有 performance 問題。

而在 Scss compile 時候,如果遇到 @import,就會一併把相關檔案也 compile 進去同一份 css,因此 client side 只要下載一份 compiled 過的 css 即可。

避免產生只需要 @import 的 css

如果 application.scss 裡頭 @import 了一個 buttons.scss 檔案,那麼在 compile 之後,將會產生 application.css 與 buttons.css 兩個 css。問題是 application.css 裡頭已經 @import 了 buttons.css,而我們又不會在其他地方用到 buttons.css,這時該怎麼辦呢?
把只要用來 @import 的 scss 檔名改以底線開頭就可以了:_buttons.scss,這樣一來就不會產生 buttons.css 了。

nesting 層數

最多 3 到 4 層;如果層數更多,就要考慮 refactor。

nesting properties

除了一般的:

application.scss
1
2
3
4
5
6
7
8
9
.content {
border: 1px solid #ccc;
h2 {
font-size: 3em;
}
p {
font-size: 1.5em;
}
}

會產生:

application.css
1
2
3
4
5
6
7
8
9
.content {
border: 1px solid #ccc;
}
.content h2 {
font-size: 3em;
}
.content p {
font-size: 1.5em;
}

nesting properties 還可以這樣用:

application.scss
1
2
3
4
5
6
.btn {
text: {
decoration: underline;
transform: lowercase;
}
}

產生:

application.scss
1
2
3
4
.btn {
text-decoration: underline;
text-transform: lowercase;
}

& 符號

直接看程式碼:

application.scss
1
2
3
4
5
6
7
8
9
.content {
border: 1px solid #ccc;
.callout {
border-color: red;
}
&.callout {
border-color: green;
}
}

會變成:

application.css
1
2
3
4
5
6
7
8
9
.content {
border: 1px solid #ccc;
}
.content .callout {
border-color: red;
}
.content.callout {
border-color: green;
}

& 符號的其他例子:

(& 後面接 selector)

application.scss
1
2
3
4
5
6
7
8
9
a {
color: #999;
&:hover {
color: #777;
}
&:active {
color: #888;
}
}

變成:

application.scss
1
2
3
4
5
6
7
8
9
a {
color: #999;
}
a:hover {
color: #777;
}
a:active {
color: #888;
}

(& 前面接 selector)

application.scss
1
2
3
4
5
6
7
.sidebar {
float: right;
width: 300px;
.users & {
width: 400px;
}
}

變成:

application.css
1
2
3
4
5
6
7
.sidebar {
float: right;
width: 300px;
}
.users .sidebar {
width: 400px;
}

Comments