SASS - ［▌▣］

SASS

Syntactically Awesome Style Sheets

CSS的預處理器

決断力を消耗しないSass開発環境構築 / Set up Sass development environment - Speaker Deck

擴充CSS原本的特性，可使用各種更簡潔的寫法，提高管理與撰寫的便利性

variables

nesting

mixins

functions

operations

@include

@extend

@content

透過編譯轉換成CSS檔案

7+1 Sass 設計模式

Sass Guidelines

除了SASS，其他還有LESS、Stylus等等各種不同CSS預處理器語言

そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています | コリス

編譯成CSS

1. 於專案目錄底下建立css與scss資料夾

2. 安裝編譯套件

npm install -D node-sass

3. ./package.json

加上{ "scripts": { "sass": "node-sass scss/style.scss css/style.css" }}

4. npm run sass

進行編譯

可加上-output-style expanded可視化輸出CSS結構

或-source-map true在使用開發工具時改為參照sass檔案

5. 刪除多餘的檔案

npm install -D rimraf

./package.json

加上{ "scripts": { "build": "npm run clean && npm run sass", "sass": "...", "clean": "rimraf css" }}，

執行npm run build會先clean再編譯sass

5. 監視自動編譯

{ "scripts": { "watch": "npm run sass -- --watch", "build": "...", "sass": "...", "clean": "..." }}

執行npm run watch

6. 加上前綴詞

npm install -D postcss-cli autoprefixer

./package.json

加上{ "scripts": {}, "browserslist: [ ">= 1%", "ie >= 10"] }

指定對應國內1%以上使用率的瀏覽器和IE10

詳細的對應瀏覽器可以參照

7. ./package.json

加上{ "scripts": { "watch": "...", "build": "npm run clean && npm run sass && npm run autoprefix", "clean": "...", "sass": "...", "autoprefix": "post css --use autoprefixer --map false --output css/style.css css/style.css" }, "browserslist": [ "..." ]}

npm run build會以clean->sass->autoprefixer的順序執行