技術
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ファイルをいくつかの小さなファイルに分割して、保守、理解、および整理が容易になることを意味します。
s corp ccorpパートナーシップSassは、スタイルシートの整理とモジュール化に役立ちます つぶやき
@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回更新するだけで、baamを実行できます。変更はすべてスタイルシートに適用されます。
私はこれをコーディングしました サスマイスターの例 、Sassの遊び場。したがって、先に進んで、これらの変数を別のものに変更してみてください。
ビジュアルデザイナーは何をしますか
変数の有用性は、色だけでなく、フォント宣言、サイズ、メディアクエリなどに限定されません。これはあなたにアイデアを与えるための本当に基本的な例ですが、私を信じてください、Sassの可能性は無限大です。
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に戻ると、次のように変換できます。
Webアプリケーションのサンプル設計ドキュメント
.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つを使用することもできます。
ノードjsとは何ですか
拡張は似ており、あるセレクタから別のセレクタにプロパティを共有できます。ただし、複数の宣言を出力する代わりに、プロパティを繰り返さずにクラスのリストを出力します。このようにして、出力でのコードの繰り返しを回避することもできます。前の例のボタンを忘れて、その方法を見てみましょう @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を確認すると、クラスが 。ボックス 出力に含まれています。この動作を望まない場合は、組み合わせることができます @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; } 例を確認してください ここに 。
もっとありますか？
絶対に！この記事を過度に複雑にしたくありませんでしたが、 生意気 あなたが発見するのを待っている世界。また、これら以外にも多くの機能があります。操作、//を使用した単一行コメント、関数、ifループ…「CSSで「X」を実行するのは素晴らしいことだ」と思ったことがあるなら、きっとそのこと「X」はすでにSassによって行われています。 「超大国のCSS」はそのキャッチフレーズであり、それは真実にこれ以上近づくことはできません。
結論
行って、 インストールページ そしてハッキングを始めましょう！私を信じてください、あなたはそれを後悔しないでしょう。
new date（）。gettime（）
はい、Sassに代わるものがいくつかあります。他のプリプロセッサ（LESS、Stylus）、ポストプロセッサ、Gruntなど。CSS変数もあります。 Sassが唯一のテクノロジーだと言っているのではありません。私が言っているのはそれが最高だということだけです！少なくとも今のところは。私が言っていることを信じないのですか？さあ、自分で試してみてください。後悔することはありません！
関連： * SMACSSの探索：CSSのスケーラブルでモジュラーなアーキテクチャ*
