sassのビルド環境を試す


# 導入

## デプロイ周り

これからはcssはSassで書こう。 - Qiita
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe

わかりやすい
`gulp-sass` の出力形式に指定する識別子もこれなのね。

Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita
https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34

gulp-glob

ここがすごいぞ！ stylelint！ - Qiita
https://qiita.com/terrierscript/items/ff4f6972c988afbec3a8

gulpでつかう事例や設定がある

https://github.com/olegskl/gulp-stylelint/issues/39

stylelintをgulpで使うときのデバッグ設定
しておかないと止まったけど理由がわからない状態だった

stylelintおすすめルール・プラグイン - Qiita
https://qiita.com/FumiyaShibusawa/items/fdeb7632177643cd42e1

作った人天才か？と思ったプラグイン、なるほど。

gulp.jsで便利なタスクを作ってみよう【エラーと通知編】 | 東京上野のWeb制作会社LIG
https://liginc.co.jp/252645

gulpでエラーのデスクトップ通知をさせる、監視も停止しない

Quick Start · gulp.js
https://gulpjs.com/docs/en/getting-started/quick-start

gulpの公式、バージョン4がなかなか入らなかったので、ここを見て安心しつつグローバルから入れ直した

Gulp v4に更新してみました - 株式会社MIRAI
https://mi-rai.co.jp/blog/2181

少し書き方が変わったけど、並列処理などもできるgulp4

@babel/preset-env · Babel
https://babeljs.io/docs/en/babel-preset-env

babel7について公式
ブラウザ対応もenvでできるのね

Webpack 4：babel-loader のアップデートで起きたエラーを解決 - Qiita
https://qiita.com/oreo3@github/items/b383c57949e0f117cbea

ブラウザ対応もenvでできる

@babel/preset-envのuseBuiltInsを使ってpolyfillする - Qiita
https://qiita.com/shisama/items/88080011bbc69e3e620b


> polyfillのための@babel/polyfillのインストールが不要

今更のバベる。 Babel 7を試してみたメモ - かもメモ
https://chaika.hatenablog.com/entry/2018/11/21/150000

> browserslistのクエリを使って、>=1% in JP(日本で使われている1%以上)のような指定も可能です。

すごいな。。

browserslist/browserslist： 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
https://github.com/browserslist/browserslist

とても便利。
設定は、package.json、rcファイル、gulpの指定などできそう。
jsの設定ファイルがあればいいのにな。
でもrcファイルでコメントがかけたのでいいや。(#)
あ、`Shareable Configs` でjs管理できるな。。

https://github.com/browserslist/browserslist-example

どのツールで利用できるかなど、使い道が書かれている

https://browserl.ist/?q=%3E0.25%25+in+JP

ここでも確認できるしcliでもいける

autoprefixer 基本 - Qiita
https://qiita.com/oreo3@github/items/dc7d570c2798e82433ca

ieでのcss-gridのautoprefixer

最新版で学ぶwebpack 4入門 - Babel 7でES2018環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
https://ics.media/entry/16028

webpackはメモだけしてひとまず保留しておこう。。


https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000048404-SCSS-import-paths-cannot-be-resolved

intellijではリソースルートにマークする

https://github.com/danielhusar/gulp-remove-empty-lines

空行の除去

［SCSS］ ［Gulp］ これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる | UI/UX Design、フロントエンド系の技術に関する備忘録 | whiskers
https://whiskers.nukos.kitchen/2014/12/14/gulp-cached.html

2014だけどもgulpのプラグインなどいろいろ書いてありそう

## postcss,scss

PostCSSを導入してみた & PostCSSの便利プラグインと誰得プラグイン – Snaplog
https://blog.mismithportfolio.com/web/20160911postcss

PostCSS まとめ - Qiita
https://qiita.com/morishitter/items/4a04eb144abf49f41d7d

> 次はブラウザが解釈可能なCSSコードを受け取り、最適化をおこなうためのプラグインを紹介します。これらのプラグインはPostCSS製のプリプロセッサーだけでなく、SassやLess、Stylusとも併用可能（プリプロセッサーの出力を入力として受け取るから）です。

今回はこの位置付けで使ったということになりそう

https://www.npmjs.com/package/postcss-neat

postcss-neat
でpostcssのプリプロセッサでneatをパースして変換することができそう。
ただ、エディタでの補完機能が活用できなくなる気がする。

# 使い方

## mixins:neat/bourbon

neatに関する9件の記事 - Qiita
https://qiita.com/tags/neat

bourbonに関する17件の記事 - Qiita
https://qiita.com/tags/bourbon