第5章 現場で使える実践Sassテクニック5-5 PostCSSでSassをさらに便利にするSample Code

PostCSS とは

PostCSSのインストール

Command
1
npm install --save-dev postcss postcss-cli

npm-scriptsにpostcssコマンドを追加

package.json
1
"scripts": {
2
  "sass": "sass ./sass:./css",
3
  "watch:sass": "sass ./sass:./css --watch",
4
  "postcss": "postcss ./css/sample.css --output ./css/dist.css",
5
  "watch:postcss": "postcss ./css/sample.css --output ./css/dist.css --watch"
6
},
Command
1
npm run postcss
2


3
# Watchの場合は
4
npm run watch:postcss

npm-run-all2でnpm-scriptsを並列実行する

Command
1
npm install --save-dev npm-run-all2
package.json
1
"scripts": {
2
  "sass": "sass ./sass:./css",
3
  "watch:sass": "sass ./sass:./css --watch",
4
  "postcss": "postcss ./css/sample.css --output ./css/dist.css",
5
  "watch:postcss": "postcss ./css/sample.css --output ./css/dist.css --watch",
6
  "dev": "npm-run-all --parallel watch:sass watch:postcss"
7
},
Command
1
npm run dev

npm-run-all2の省略記法

package.json
1
"scripts": {
2
  // ~省略~
3
  "dev": "run-p watch:*"
4
},

PostCSSの設定ファイル

postcss.config.js
1
module.exports = {
2
  plugins: {
3
    // ここにプラグインの設定を書く
4
  },
5
};

ベンダープレフィックスを楽々自動付与する

Command
1
npm install --save-dev autoprefixer
postcss.config.js
1
module.exports = {
2
  plugins: {
3
    autoprefixer: {},
4
  },
5
};
Sass（sample.scss）
1
::placeholder {
2
  color: gray;
3
}
4
.box {
5
  user-select: none;
6
}
dist.css
1
::-moz-placeholder {
2
  color: gray;
3
}
4


5
::placeholder {
6
  color: gray;
7
}
8


9
.box {
10
  -webkit-user-select: none;
11
     -moz-user-select: none;
12
          user-select: none;
13
}

対象ブラウザを設定する

package.json
1
{
2
  "scripts": {
3
    //〜略〜
4
  },
5
  "browserslist": [
6
    "last 4 versions"
7
  ],
8
}
dist.css
1
::-webkit-input-placeholder {
2
  color: gray;
3
}
4


5
::-moz-placeholder {
6
  color: gray;
7
}
8


9
:-ms-input-placeholder {
10
  color: gray;
11
}
12


13
::-ms-input-placeholder {
14
  color: gray;
15
}
16


17
::placeholder {
18
  color: gray;
19
}
20


21
.box {
22
  -webkit-user-select: none;
23
     -moz-user-select: none;
24
      -ms-user-select: none;
25
          user-select: none;
26
}

CSS プロパティの記述順を自動でソートする

インストールと設定

Command
1
npm install --save-dev css-declaration-sorter
postcss.config.js
1
module.exports = {
2
  plugins: {
3
    "css-declaration-sorter": { "order": "smacss" }
4
  },
5
};
Sass（sample.scss）
1
.test {
2
  color: #C55;
3
  display: flex;
4
  justify-content: space-between;
5
  border: 0;
6
  background: #eee;
7
  transition: all .5s;
8
  animation: none;
9
}
コンパイルされたCSS（sample.css）
1
.test {
2
  display: flex;
3
  justify-content: space-between;
4
  border: 0;
5
  background: #eee;
6
  color: #C55;
7
  animation: none;
8
  transition: all 0.5s;
9
}

バラバラになったメディアクエリをまとめてコード量を削減してスッキリさせる

Command
1
npm install --save-dev postcss-sort-media-queries
postcss.config.js
1
module.exports = {
2
  plugins: {
3
    "postcss-sort-media-queries": {}
4
  },
5
};
Sass（sample.scss）
1
.list {
2
  width: 380px;
3
  @media (width <= 767px) {
4
    width: 50%;
5
  }
6
  @media (width >= 1200px) {
7
    width: 100%;
8
  }
9
}
10


11
.banner {
12
  width: 800px;
13
  @media (width <= 767px) {
14
    width: 500px;
15
  }
16
  @media (width >= 1200px) {
17
    width: 100%;
18
  }
19
}
CSS（dist.css）
1
.list {
2
  width: 380px;
3
}
4
@media (width <= 767px) {
5
  .list {
6
    width: 50%;
7
  }
8
}
9
@media (width >= 1200px) {
10
  .list {
11
    width: 100%;
12
  }
13
}
14


15
.banner {
16
  width: 800px;
17
}
18
@media (width <= 767px) {
19
  .banner {
20
    width: 500px;
21
  }
22
}
23
@media (width >= 1200px) {
24
  .banner {
25
    width: 100%;
26
  }
27
}
CSS（dist.css）
1
.list {
2
  width: 380px;
3
}
4


5
.banner {
6
  width: 800px;
7
}
8


9
@media (width >= 1200px) {
10
  .list {
11
    width: 100%;
12
  }
13
  .banner {
14
    width: 100%;
15
  }
16
}
17


18
@media (width <= 767px) {
19
  .list {
20
    width: 50%;
21
  }
22
  .banner {
23
    width: 500px;
24
  }
25
}

メディアクエリをデスクトップファーストの並び順にする

postcss.config.js
1
module.exports = {
2
  plugins: {
3
    "postcss-sort-media-queries": {
4
      sort: "desktop-first"
5
    },
6
  },
7
};
CSS（dist.css）
1
.list {
2
  width: 380px;
3
}
4


5
.banner {
6
  width: 800px;
7
}
8


9
@media (width <= 767px) {
10
  .list {
11
    width: 50%;
12
  }
13
  .banner {
14
    width: 500px;
15
  }
16
}
17


18
@media (width >= 1200px) {
19
  .list {
20
    width: 100%;
21
  }
22
  .banner {
23
    width: 100%;
24
  }
25
}

サンプルコード一覧へ

Amazonで購入する