Sassを採用する：VanillaCSSの使用をやめるべき理由

Sassやその他のCSSプリプロセッサについて最初に聞いたとき、私の正確な考えはそれほど熱心ではありませんでした。 「CSSと同じくらい美しく機能するものに別のツールが必要なのはなぜですか？」 「私はそれを使いません」。 「私のCSSはそれを必要としないほど十分に注文されています」。 「プリプロセッサは、CSSの書き方を知らない人のためのものです。CSSの書き方を知っていれば、プリプロセッサは必要ありません」。 「結局のところ、プロセッサはCSSの書き方を知らない人のためのものです。 もしそうなら、プリプロセッサは必要ありません。」 そして、いくつかのプロジェクトでそれを使用することを余儀なくされるまで、私は実際にしばらくの間それらを避けました。

プロジェクトでバニラCSSに戻らなければならなかった最近まで、Sassでの作業をどれほど楽しんでいるかはわかりませんでした。 その間、私はたくさんのことを学び、Sassを賞賛し、これをより良い世界にし、あなたをより幸せな人にすることに決めました！

とにかくSassを使用する理由

組織：@import

先ほど触れたこのプロジェクト、大規模なeコマースWebサイトには、7184行の非圧縮スタイル宣言を含む単一のCSSファイルがありました。 はい、あなたはそれを正しく読んでいます：CSSの7,184行。 これは、フロントエンド開発者が業界で処理しなければならなかった最大のCSSファイルではないと確信していますが、完全に混乱するほどの大きさでした。

これがSassが必要な最初の理由です。Sassはスタイルシートの整理とモジュール化に役立ちます。 それは変数ではなく、入れ子でもありません。 私にとって、Sassの重要な機能は部分的なものであり、CSS@importルールを拡張してSCSSファイルとSassファイルをインポートできるようにする方法です。 実際には、これは、巨大なstyle.cssファイルをいくつかの小さなファイルに分割できることを意味します。これにより、保守、理解、および整理が容易になります。

@importルールは、CSS自体とほぼ同じくらい長い間存在しています。 ただし、CSSファイルで@importを使用すると、インポートするCSSファイルごとに1つずつ、個別のHTTPリクエストがトリガーされるため、評判が悪くなりました。 これは、サイトのパフォーマンスに悪影響を与える可能性があります。 では、Sassで使用するとどうなりますか？ 「プリプロセッサ」という言葉が何を意味するのかを考えるのをやめなかったのなら、今がその時です。

プリプロセッサは、入力データを処理して、別のプログラムへの入力として使用される出力を生成するプログラムです。 —ウィキペディア

つまり、@ importルールに戻ると、@ importはSassによって処理され、すべてのCSSファイルとSCSSファイルが単一のファイルにコンパイルされてライブサイトに配置されることを意味します。 ユーザーは1つのリクエストを行うだけで、1つのファイルをダウンロードできますが、プロジェクト構造は数百のモジュール化されたファイルで構成できます。 これは、典型的なSassプロジェクトのstyle.scssがどのように見えるかです。

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

繰り返さないでください：変数

Sassを称賛する記事は、おそらくそのスター機能である変数について言及することから始まります。 変数の最も一般的な使用法はカラーパレットです。 誰も同じ16進コードを使用していないため、同じ色であるはずの宣言がいくつか見つかり、CSSでわずかに異なる色合いになってしまいましたか？ 救助にサス。 Sassでは、ほぼすべての値で変数を宣言できます。 したがって、カラーパレットは次のようになります。

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

「$」で始まる単語はSass変数です。 つまり、スタイルシートの後半でこれらの単語を使用できるようになり、前に定義した値にマップされます。

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

これにより、CSSコードの7184行がどのように変わるか想像してみてください。今すぐSassが必要になるかもしれません。 さらに良いことに、ブランドの再設計があり、CSSのすべての色を更新する必要があると想像してください。 Sassを使用する場合、必要なのは、これらの変数の宣言を1回更新することだけです。 変更はすべてスタイルシートに適用されます。

この例は、Sassの遊び場であるSassmeisterでコーディングしました。 したがって、先に進んで、それらの変数を別のものに変更してみてください。

変数の有用性は、色だけでなく、フォント宣言、サイズ、メディアクエリなどに限定されません。 これはあなたにアイデアを与えるための本当に基本的な例ですが、私を信じてください、Sassの可能性は無限大です。

クリーナーソースコード：ネスティング

ネストは、おそらくSassの2番目に言及されている機能である可能性があります。 Sassを使用してバニラCSSに戻ったとき、私が見ていたCSSファイルは非常に雑然としていて、縮小されているかどうかわかりませんでした。 ネストしないと、バニラCSSはきれいに印刷された.min.cssファイルよりも見栄えが良くなりません。

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

ネストを使用すると、宣言の中括弧の間にクラスを追加できます。 Sassは、セレクターを非常に直感的にコンパイルして処理します。 「＆」文字を使用して、親セレクターの参照を取得することもできます。 CSSの例に戻ると、次のように変換できます。

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

見た目も美しく、読みやすいです。 この例を自由に試してみてください。

また！ 自分を繰り返さないでください：ミックスインと拡張

CSSでの繰り返しは常に避けるのが難しいです。 そして、特にSassがミックスインを提供して拡張する場合は、これをもう少し強調しても問題ありません。 これらは両方とも強力な機能であり、多くの繰り返しを回避するのに役立ちます。 ミックスインとエクステンドの可能性には終わりがないようです。 ミックスインを使用すると、パラメーター化されたCSS宣言を作成し、スタイルシート全体で再利用できます。

たとえば、内部にボタンのあるボックスモジュールがあるとします。 ボックスの境界線とボタンの背景を同じ色にする必要があります。 バニラCSSを使用すると、次のようなことができます。

 .box { border: 2px solid red; } .box .button { background: red; }

同じボックスモジュールが必要ですが、色が異なるとします。 CSSに次のようなものを追加します。

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

ここで、ボックスモジュールが必要であるが、境界線が薄いとします。 追加します：

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

何度も繰り返しますよね？ Sassを使用すると、これらのケースを抽象化して繰り返しを減らすことができます。 次のようなミックスインを定義できます。

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

したがって、ソースコードは次のように減らすことができます。

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

美しく見えますよね？ この例を試してみてください。 ミックスインの独自のライブラリを作成することも、コミュニティライブラリの1つを使用することもできます。

拡張機能も同様で、あるセレクターから別のセレクターにプロパティを共有できます。 ただし、複数の宣言を出力する代わりに、プロパティを繰り返さずにクラスのリストを出力します。 このようにして、出力でのコードの繰り返しも回避できます。 前の例のボタンを忘れて、 @ extendが.boxesでどのように機能するかを見てみましょう。

最初のボックスを宣言するとします。

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

ここで、これに似ているが境界線の色が異なる2つのボックスが必要です。 あなたは次のようなことをすることができます：

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

コンパイルされたCSSは次のようになります。

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

強力ですよね？ ここに例があります。 結果のCSSを確認すると、クラス.boxが出力に含まれていることがわかります。 この動作が必要ない場合は、 @extendを「プレースホルダー」と組み合わせることができます。 プレースホルダーは、CSSにクラスを出力しない特別なセレクターです。 たとえば、リストのデフォルトのスタイルを頻繁にリセットしていることに気付くことがあります。 私は通常、次のようなプレースホルダーで@extendを使用します。

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

その後、このパターンをすべてのスタイルシートで再利用できます。

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

コンパイルされたCSSは次のようになります。

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

こちらの例をご覧ください。

もっとありますか？

絶対！ この記事を過度に複雑にしたくはありませんでしたが、あなたが発見するのを待っている生意気な世界があります。 また、これら以外にも多くの機能があります。操作、//を使用した単一行のコメント、関数、ループの場合…「CSSで「X」を実行するのは素晴らしいことだ」と思ったことがあるなら、きっとそのこと「X」はすでにSassによって行われています。 「超能力を備えたCSS」はそのタグラインであり、それは真実にこれ以上近づくことはできません。

結論

インストールページにアクセスして、ハッキングを開始してください。 私を信じてください、あなたはそれを後悔することはありません。

はい、Sassに代わるものがいくつかあります。 他のプリプロセッサ（LESS、Stylus）、ポストプロセッサ、Gruntなど。CSS変数もあります。 Sassが唯一のテクノロジーだと言っているのではありません。 私が言っているのはそれが最高だということだけです！ 少なくとも今のところは。 私が言っていることを信じないのですか？ さあ、自分で試してみてください。 後悔することはありません！