1

• CSS 都寫在SASS 檔案裡面

​

Sass 原理

all.scss

all.css

2

all.scss

_Variable.SCSS

_index.scss

all.css

_reset.scss

3

Sass 提供兩種寫法

.menu{..}

.menu ul {..}

.menu li {..}

.menu a {..}

SCSS

SASS

.menu3{

ul {..}

li {..}

a {..}

}

.menu

..

ul

..

li

..

a

..

CSS

SCSS常見問題與撰寫觀念

• SCSS可完全當作CSS來寫
• 如果CSS後面沒加分號「;」會編譯錯誤
• 如果有編譯錯誤，錯誤訊息會顯示在編譯出的CSS
• 多利用巢狀寫法(Nesting)
• CSS巢狀不要超過四層

​

​

4

Variable(變數)

​

​

​

​

​

​

​

​

​

5

變數(variables)

• 將時常需要設定的CSS放在變數來管理
• 變數是用美元符號開頭�

6

$text-color:#f00;

$font-size:13px;�$width:960px;

.shop li{

width: $width / 4 編譯出240px

}

​

變數(variables)

7

body{

color:#f00;

}

$text-color:#f00;

body{

color:$text-color;

}

SCSS

​

CSS

​

變數格式

• 格式
• 數字：10、1px、3em
• 字串：'test'、 "../images/big/“
• 顏色：red、#000000、rgba(255,255,255,0.9)
• 布林：true、flase
• 空值：null
• 支援運算(1em+1em、6px*2)

​

8

插補(Interpolation)：#{}，可使用#{$變數名稱}來連接字串

​

觀念補充

• 用SCSS寫完變數後，後面要記得加上分號「;」
• 變數裡面還可以帶變數
• 常用顏色變數功能：
• darken($blue,10%)　 →　將變數色系調暗10%
• lighten (#ff0000,10%) → 將色碼色系調亮10%

9

實作練習

• 嘗試使用變數含變數功能。
• 嘗試使用顏色變數。

​

​

10

$font-size:12px;

$font-l: $font-size*1.2;

$color-blue: #137edc;

body{

font-size: $font-l;

background: darken($color-blue,10%);

}

​

@import(匯入)

可將 SCSS 檔案彙整成一隻 CSS 檔

​

​

​

​

​

​

​

​

​

11

12

all.scss

_variable.scss

all.css

@import "variable" ;

//自己寫的 scss

​

​

13

all.scss

_variable.scss

all.css

@import "variable" ;

@import "main" ;

​

​

​

_main.scss

14

all.scss

_variable.scss

all.css

@import "variable";

@import "reset";

@import "main";

​

​

​

_main.scss

_reset.scss

使用@import可將SCSS彙整成一隻檔案

15

all.scss

_reset.scss

_base.scss

all.css

@import "reset" ;

@import "base";

​

​

實作練習

1. 在SASS資料夾新增兩個檔案 _reset.scss、_base.scss，�並在裡面寫些css。�
2. 在all.scss裡面寫→�
3. 儲存全部SCSS後觀察編譯出來的CSS是否符合結果，並試著將import順序相反後觀察結果。

�

16

@import "reset" ;

@import "base";

​

​

如果SCSS的檔名前面有加下底線( _ )，就不會編譯出css。

觀念補充

• SCSS/SASS 在編譯過程中，是從上到下來執行，所以下述的程式碼會編譯錯誤。

17

.box{

font-size: $blue;

}�

$blue: #0088ff;

​

​

目前你可以做出的架構

18

all.scss

_Variable.SCSS

_base.scss

all.css

_reset.scss

14.Sass工作流程分享

19

Sass工作流程分享

• 將專案資料夾拉進sublime側欄選單：
• 搜尋檔案：Ctrl+p(Win) 、 Cmd+p(Mac)
• 關閉檔案：Ctrl+w(Win) 、 Cmd+w(Mac)
• 開啟Line Comments註解，方便搜尋程式碼。

​

20