重新認識切版 - Sass實作
雖然之前整理過一篇 Sass 筆記,但許多實作的地方紀錄的還是有點不清楚。
為什麼要使用 Sass?
管理 css 的時候非常方便。
但是,網頁只看的懂 css 檔案,副檔名還是 css,不用改 sass。
sass 的原理為,css 都寫在 sass 檔案裡面,途中就是經過編譯的地方,再轉換成 css。
Sass 程式語言,兩種格式寫法
- SASS (利用空格去區分階層)
- SCSS (保有括號與逗號)
如何編譯 Sass?
- 軟體編譯
- gulp,webpack 前端軟體 / 打包工具
- 編輯器內建的插件
& 連接符號,可以跟據上一層的結構,繼續進行編譯。
1 |
|
使用變數
- 時常需要設定的 css 可以放在變數來管理。
- 變數使用美元
$
符號開頭 - 結尾需使用分號
- 變數放在前面的位置,後面的 css 才會吃到
1 |
|
變數搭配加減乘除好方便
變數格式
- 格式
- 數字: 10,1px,3em
- 字串: ‘test’,”../images/big”
- 顏色: red,#000000
- 布林: true,flase
- 空值: null
- 支援運算 (1em+1em,6px*2)
數字
1 |
|
字串
設定不同的字體格式。
1 |
|
調出理想的顏色
darken
,lighten
的使用方法。
1 |
|
Sass import - 切分檔案好工具,維護管理更方便
@import
,可將 Scss 檔案彙整成一隻 CSS 檔。
有下底線的是會被合併的,_variable.scss
。
拆開管理
1 |
|
- _variable.scss
- _all.scss (import 全部的檔案)
- _main.scss
常見的錯誤
- 沒有在結束的地方加上分號
- variable 檔案(變數),放在 main 下方(找不到變數)
CSS Reset 的差異
- meyerweb
全部清空
- Normalize
保有瀏覽器該有的樣式
整合 Reset 流程
- _variable.scss
- reset.scss
- main.scss (自己寫的 css)
- hover (載入別人的第三方插件)
從網路上載下來的檔案,直接在 css 後面改 scss 就好,前方加上下底線 _。
Sass Mixin - 讓你不會回想原理,而中斷思緒
@mixin
能記住 css 技巧,讓你不用再因回想原理而思緒中斷。
1 |
|
Mixin + import 組合技
新增 _mixin.scss,在 all.css 加上此檔案。注意要放在 main.css 的上面。
搭配參數,讓 Mixin 更加靈活!
在@mixin
加上變數,可以更靈活使用。
1 |
|
熟悉 Mixin 後,搭配 RWD 宛如天衣無縫
@content
可以在撰寫 main.scss 的時候,放入適合的內容。
1 |
|
1 |
|
Sass/CSS 設計模式 - 教您最實用的網頁收納術!
OOCSS 是 CSS 的架構方法,在這基本原則下 CSS 具有以下特點:
- 結構與樣式分離
- 容器與內容分離
新技術的出現,就是要解決當下的問題。OOCSS 的出現,是就是強化了 CSS 的可複用性 與 CSS 的擴展能力。
結構與樣式
樣式表就像是幫手機換上不同的手機殼。結構與樣式分開,當想要換上手機殼時,只需要更換樣式就好。
1 |
|
容器與內容
960 Grid System 就是一款容器與內容分離的格線系統。
容器處理容器的事情,內容處理內容的。
1 |
|
重新認識切版 - Sass實作
https://phoebeho.com/切版/20210628/82738359/