sass 速查手冊 - [ 實戰篇]

1. 安裝

click sass install sass環境配置 ;我這裏略過~ 直接實戰

2. sass命令使用

//cmd 輸出文件
sass sass/style.scss:css/style.css

//cmd 文件監聽
sass --watch sass:css

//cmd  代碼緊湊格式
sass --watch sass:css --style compact

//cmd  代碼壓縮格式
sass --watch sass:css --style compressed

//cmd  代碼易於閱讀的擴展格式
sass --watch sass:css --style expanded

那麼現在問題來了 這些命令怎麼在JetBrains WebStorm 2018.1 x64.exe中 watch文件呢?

↑ 具備sass 編譯環境之後 ;把想要的sass編譯指令 添加或替換 到 紅框位置;

3. sass與scss區別

3.1 快速使用

變量

3.2 嵌套 > 時調用父選擇器

3.3 嵌套 > 屬性嵌套

3.4 混合mixin

3.5 繼承

3.6import 多模塊引入

3.7 註釋

3.8 Date類型& 運算 & string

其他一些顏色函數
rgb 與 rgba
hsl 與 hsla
adjust-hue
lighten 與 darken
saturate 與 desaturate
opacify 與 transparentize

3.9 list

3.10 map

3.11 布爾值

Interpolation 值插入

---

4. 控制指令 Control Dirctives

4.1 @if

4.2 @for

4.3 @each

4.4 @while

---

5. function