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

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

Sassのコンパイル、ベンダープレフィックス自動付加、Lint、自動フォーマット、pre-commit hookなど、チーム開発に最適なSass開発環境をステップ・バイ・ステップで構築していく。

デザイナーにもオススメ!シンプルですぐできるSass(SCSS)開発環境構築
https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html

https://twitter.com/bc_rikko

6154244654c5f07cdf7c09da61bfe55f?s=128

ダーシノ

August 22, 2019
Tweet

Transcript

  1. 6.

    I really want to clear my life to make it

    so that I have to make as few decisions as possible about anything except how to best serve this community. - Mark Zuckerberg 画像: https://en.wikipedia.org/wiki/Mark_Zuckerberg 引⽤元: https://www.cnbc.com/2017/01/05/mark-zuckerberg-and-john-paul-dejorias-simple-wardrobe-trick.html
  2. 7.

    Iʼm trying to pare down decisions. I donʼt want to

    make decisions about what Iʼm eating or wearing. Because I have too many other decisions to make, - Brack Obama 画像: https://en.wikipedia.org/wiki/Barack_Obama 引⽤元: https://www.vanityfair.com/news/2012/09/barack-obama-michael-lewis
  3. 11.

    やること 1. Node.jsのインストール 2. プロジェクト作成 3. Sass→CSSのコンパイル 4. ベンダープレフィックス付加 5.

    コーディングスタイルの統⼀ 6. ⾃動フォーマット 7. ファイル圧縮 8. エディタ上で⾃動フォーマット 9. コミット前にLintチェック 参考: https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html
  4. 12.
  5. 13.

    // package.json { "name": "sass-project", "scripts": { "watch": "npm run

    sass -- --fix", "build": "npm run stylelint && npm run clean && npm run sass && npm run autoprefix && npm run minify", "sass": "node-sass --output-style expended --source-map true scss/style.scss css/style.css", "clean": "rimraf css", "autoprefix": "postcss --use autoprefixer --map false --output css/style.css css/style.css", "stylelint": "stylelint ./scss/**/*.scss --fix", "minify": "cleancss -o css/style.min.css css/style.css" }, "devDependencies": { "autoprefixer": "^9.6.1", "clean-css-cli": "^4.3.0", "husky": "^3.0.2", "lint-staged": "^9.2.1", "node-sass": "^4.12.0", "postcss-cli": "^6.1.3", "prettier": "^1.18.2", "rimraf": "^2.6.3", "stylelint": "^10.1.0", "stylelint-config-recess-order": "^2.0.3", "stylelint-config-standard": "^18.3.0", "stylelint-prettier": "^1.1.1", "stylelint-scss": "^3.9.3" }, "browserslist": [ ">= 1% in JP", "ie >= 10" ], "stylelint": { "plugins": [ "stylelint-scss", "stylelint-prettier" ], "extends": [ "stylelint-config-standard", "stylelint-config-recess-order" ], "rules": { "prettier/prettier": true, "at-rule-no-unknown": null, "scss/at-rule-no-unknown": true } }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "scss/**/*.scss": [ "npm run stylelint", "git add" ] } }
  6. 16.

    3. Sass→CSSのコンパイル # ディレクトリを作成する ./sass-project ┣ css // コンパイルされたCSSのコードを格納する ┗

    scss // Sass(scss)のコードを格納する # Sassをコンパイルするツールをインストールする $ npm install -D node-sass 補⾜情報 • npm installでライブラリをインストールできる • -Dは開発環境の依存関係を保存するためのオプション
  7. 17.

    3. Sass→CSSのコンパイル 補⾜情報 • npm run sassを実⾏するとSass→CSSにコンパイルされる • オプション •

    —output-style expanded: 出⼒されたCSSが読みやすくなる • —source-map true: ブラウザのdevtoolsを⾒たときにSassファイルを参照してくれる • 最終形(オススメ) • node-sass
 —output-style expanded —source-map true
 scss/style.scss css/style.css { "scripts": { "sass": "node-sass scss/style.scss css/style.css" } } ./package.json
  8. 18.

    3. Sass→CSSのコンパイル ./cssにゴミが残ることがあるのでコンパイル前に削除する # rimraf(rm -rfを実⾏してくれるツール) $ npm install -D

    rimraf # package.json 補⾜情報 • npm run buildを実⾏するとclean→sassの順番で実⾏してくれる { "scripts": { "build": "npm run clean && npm run sass", "sass": "...", "clean": "rimraf css" } }
  9. 20.

    4. ベンダープレフィックス付加 -ms-, -o-, -moz-, -webkit-とか調べるのが⾯倒なので⾃動で付加する # PostCSS(CSSに対していろいろやってくれる) $ npm

    install -D postcss-cli # PostCSSのプラグイン # Autoprefixer(⾃動でベンダープレフィックスをつけてくれる) $ npm install -D autoprefixer # package.json # browserslistで国内1%以上のシェアとIE10に対応させる { "scripts": {}, "browserslist": [ ">= 1% in JP", "ie >= 10”] } 補⾜情報 • browserslistでサポート対象のブラウザバーションを指定する • 詳細は https://browsersl.ist/ で確認できる
  10. 21.

    4. ベンダープレフィックス付加 # package.json { "scripts": { "watch": "...", "build":

    "npm run clean && npm run sass && npm run autoprefix", "clean": "...", “sass" : "...", "autoprefix": "postcss --use autoprefixer --map false ―output css/style.css css/style.css" }, "browserslist": [ ">= 1% in JP", "ie >= 10"] } 補⾜情報 • npm run buildを実⾏するとclean→sass→autoprefixが実⾏される
  11. 22.

    4. ベンダープレフィックス付加 // コンパイル前 $color: black; body { background-color: $color;

    } .flex { display: flex; } IE10⽤にベンダープレフィックを ⾃動でつけてくれる // コンパイル後 body { background-color: black; } .flex { display: -ms-flexbox; display: flex; }
  12. 23.

    5. コーディングスタイルの統⼀ 個⼈差をなくすためにコーディングスタイルを統⼀する # Stylelint(CSSのコーディングスタイルをチェックしてくれる) $ npm install -D stylelint

    # StylelintのSCSS⽤プラグイン $ npm install -D stylelint-scss # 標準的なコーディングスタイルのルール $ npm install -D stylelint-config-standard # プロパティ順を強制するプラグイン $ npm install -D stylelint-config-recess-order
  13. 24.

    5. コーディングスタイルの統⼀ Stylelintのルールを設定する { "scripts": {}, "browserslist": [], "stylelint": {

    "plugins": [ "stylelint-scss" ], "extends": [ "stylelint-config-standard", "stylelint-config-recess-order" ], "rules": { "at-rule-no-unknown": null, "scss/at-rule-no-unknown": true } } } # package.json 補⾜情報 • rulesのat-rule-no-unknowはSCSSの@mixinや@functionをエラーにしないための設定
  14. 25.

    5. コーディングスタイルの統⼀ # package.json 補⾜情報 • npm run stylelintを実⾏するとルールにしたがって⾃動でコードを修正してくれる •

    npm run buildを実⾏するとclean→stylelint→sass→autoprefixが実⾏される { "scripts": { "watch": "...", "build": "npm run clean && npm run stylelint && npm run sass && npm run autoprefix", "clean": "...", "sass": "...", "autoprefix": "...", "stylelint": "stylelint scss/**/*.scss --fix" } }
  15. 27.

    6. ⾃動フォーマット // Before .my-style { width: 100px; height: 500px;

    background-color: #333333; padding: 10px; position: relative; margin: 10px; color: #ffffff; } // After .my-style { position: relative; width: 100px; height: 500px; padding: 10px; margin: 10px; color: #fff; background-color: #333; }
  16. 28.

    7. ファイル圧縮 不要なコメントやスペースを削除してファイルを圧縮する # clean-css(コメントやスペースを削除して圧縮してくれる) $ npm install -D clean-css-cli

    # package.json { "scripts": { "watch": "...", "build": "npm run clean && npm run stylelint && npm run sass && npm run autoprefix && npm run minify", "clean": "...", "sass": "...", "autoprefix": "...", "stylelint": "...", "minify": "cleancss -o css/style.min.css css/style.css" } }
  17. 29.

    7. ファイル圧縮 // Before .my-style { position: relative; width: 100px;

    height: 500px; padding: 10px; margin: 10px; color: #fff; background-color: #333; } // After .my- style{position:relative;wi dth:100px;height: 500px;padding:10px;margin: 10px;color:#fff;background -color:#333}
  18. 31.

    9. コミット前にLintチェック 最終防衛ライン(pre-commit hook)でLintチェックする # husky(git hooksを使いやすくしてくれる) $ npm install

    -D husky # lint-staged(ステージングされたファイルをチェックする) $ npm install -D lint-staged # package.json { "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "scss/**/*.scss": ["npm run build:stylelint", "git add"] } }
  19. 32.

    9. コミット前にLintチェック # エラーが含まれているとコミットできない $ git commit -m “エラーが含まれています” husky

    > pre-commit (node v8.16.0) ↓ Stashing changes... [skipped] → No partially staged files found... › Running tasks... › Running tasks for scss/**/*.scss ✖ npm run stylelint git add ✖npm run stylelint found some errors. Please fix them and try committing again. # エラーがなければコミット前に⾃動フォーマットする $ git commit -m “⾃動フォーマットされます” husky > pre-commit (node v8.16.0) ↓ Stashing changes... [skipped] → No partially staged files found... ✔ Running tasks... [master c28cbea] haha 1 file changed, 1 insertion(+), 8 deletions(-)