一場發現 之旅
呈現
請自備飲料爆米花，千萬不要忘記按下喜歡並訂閱加分享，最後請記得點小鈴鐺
什麼是 Sass ?
一段剪髮過程的領悟
Sass v.s. Scss
我們都沒錯，只是不適合
Sass v.s. Scss
我們都沒錯，只是不適合
nav
float:left
a
display:inline-blocknav{
float:left;
a{
display:inline-block;
}
}為什麼要用 Sass ?
天下武功，無堅不摧，唯快不破
Sass 有何特別之處?
傷心的人別聽慢歌，切版的人別從頭刻
切版的人別從頭刻
你寫的太多了 你切的太慢了 你做的太傻了
每次都 搞到 Deadline 要來了
OH~ OH~
因為你從頭刻 一個一個字刻 刻的心如刀割
是不是 該換一種 節奏了
OH~ OH~
變數 ( Variable )
寶貝～因為愛你，所以取你
繼承 ( Extend )
不能說很像，根本就一樣
繼承 ( Extend )
不能說很像，根本就一樣
韓國 宋承憲
新店 送橙線
繼承 ( Extend )
不能說很像，根本就一樣
韓國 宋承憲
新店 送橙線
函式 ( Function )
你才數學系，你全家都數學系
混用 ( Mixin )
混在一起做撒尿牛丸，我吃完考試都一百分呢
其他 ( Others )
巢狀、變數管理、載入、判斷、迴圈...族繁不及備載
怎麼開始用 Sass ?
請站穩踏階，緊握扶手
1.環境、軟體與外掛
環境：Node.js
軟體：VS Code
外掛： Live Server、Live Sass Compiler
2.軟體設定
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/style"
},
{
"extensionName": ".min.css",
"format": "compressed",
"savePath": "/dist/style"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],讓我們開始吧 !!!
deck
By Alex Chen
