CSS講義 第5回

今日覚えていってほしいこと

• CSSのプリプロセスとポストプロセス
• Sass（SASS・SCSS）の基本的な構文
• PostCSS

CSSのプリプロセス・ポストプロセス

CSSプリプロセッサー(CSSメタ言語)

• CSSとは異なる独自の構文で記述された文字列を入力とし、ブラウザが解釈可能なCSSコードを出力するもの。SassやLess、Stylus等がその実装に当たる。

####CSSポストプロセッサー

• CSSを入力とし、より効果的なCSSに変換し、最適化するもの。例えば、コードを圧縮したり、自動でベンダープリフィックスを付与したり、プロパティ宣言の順番を読みやすいように並び変えたりするもので、CSSWring(圧縮)やAutoprefixer（ベンダープレフィックスの付与）、CSSComb（プロパティの並び替え）がその実装。

引用:CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS

pre：前 post:後

Sass

• Syntactically Awesome Stylesheets (構文的にすごいスタイルシート)
• SASS記法とSCSS記法を持つ
• 変数が利用できる
• ネストできる
• 同一のネームスペースを持つプロパティは、ネームスペースでネストできる
• @import でCSSファイルを1つにまとめられる
• @mixin と @include でスタイルを使いまわせる
• @mixin では変数に引数利用も可能
• 加減乗除ができる
• @if @for @each @while で、条件分岐や繰り返しができる

https://codepen.io/hisako135/pen/xXGZer

PostCSS

• Node.js製のCSSパーサー
• パーサーした結果のAST(JSオブジェクト)を操作するための便利なAPIを提供する
• PostCSS自体はCSSには何もしない
• ASTを操作し、CSSを変換する処理はプラグインが施す
• PostCSSとそれらのプラグインを含めたエコシステムをPostCSSと呼ぶことが多い
• 有名どころのプラグインはAutoprefixer

AST（abstract syntax tree)：抽象構文木
全てのトークン（字句）が構文木に含まれる。 これらのトークンには、"(" や ")" など後の処理（意味解析など）に不要なものも含まれる。 これら不要なトークンを除いたものを、抽象構文木（abstarct syntax tree）という。

エコシステム：「生態系」を指す英語「ecosystem」を比喩的に用い、依存関係や協調関係の連携構造を指す

PostCSSはポストプロセッサー、ではない

• 過去、PostCSSで作られたAutoprefixer等を「ポストプロセッサー」と命名し、PostCSSはポストプロセッサーを作るためのツールとしていた
• しかし、cssnextやPreCSSといった言語拡張（プリプロセス）のためのツールも作られるようになり、PostCSSチームは「ポストプロセッサー」という単語を使わないことになった

cssnext(postcss-cssnext)

• プリプロセッサーとしてのPostCSSプラグイン
• 将来的にCSSの仕様として入る可能性のあるプラグインをまとめたもの
• postcss-custom-properties
• postcss-custom-media
• postcss-custom-selectors
• postcss-apply など

https://codepen.io/hisako135/pen/wraGow
CSSの仕様自体が破棄される可能性がなくはない...

例1) postcss-custom-properties

• Custom Properties(CSS Custom Properties for Cascading Variables Module Level 1)シンタックスでグローバル変数を定義できるようにするプラグイン
• 通常のCSS2.1に対応したコードに変換することができる

CSSで変数を使いたい場合、Sassでは$を使うが、これはSassによる独自構文でありCSSの標準構文ではない

$brand-color: #88E18E;
 //変換前
.logo {
 color: $brand-color;
}

//変換後
.logo {
 color: #88E18E;
}

Custom Propertiesでの変数定義のシンタックス。:rootセレクタ内でのみ定義が可能。

:root {
 --brand-color: #88E18E;
}

.logo {
 color: var(--brand-color)
}

例2) postcss-custom-media

• メディアクエリーのパラメーターに名前を付けられるようにするためのPostCSSプラグイン
• Custom Media Queries(Media Queries Level 5)

@custom-media --mobile (max-width: 415px);

@media (--mobile) {
  .selector {
      property: value;
  }
}

ポストプロセッサーとしてのプラグイン

• CSS最適化を目的とするプラグイン

1. Autoprefixer：ベンダープリフィックスを自動で付与する
2. cssnano：圧縮
3. postcss-sorting：プロパティ宣言の順序をソートするためのプラグイン など...

PostCSSを使用するメリット

• 必要な機能だけを使用することができる
• その結果パフォーマンスも良く、ビルドを早くすることができる
• PreCSSを使えばSassっぽい記法で書ける