Sassを理解するためのシンプルで簡単なガイド

少し前に、Thoriq FirdausがSassを使い始めるための素晴らしい記事を書いています。この記事では、この非常に便利なCSSプリプロセッサ言語をインストールして使用する方法を説明しました。.

この記事では、Sassで何ができるのか、そして開発者がどのようにしてそれを使用してより優れたモジュール式のCSSコードを作成するのかについて、もう少し詳しく説明します。必要なセクションに進んでください。

貿易の道具
変数
ネスティング
ルールセットの拡張
ミックスイン
プレースホルダセレクタ
オペレーション
関数

貿易の道具

Thoriqは、コマンドラインからSassを使用する方法を説明しました。 sass - watch コマンド.

あなたがGUIツールを好むならば、あなたは私の個人的なお気に入りのアプリ、Codekit、SassをコンパイルするためのWeb開発者ツール、連結する、自動プレフィックスすることともっと多くと一緒に行くことができます。 Preprosはすべてのシステムで使用できるもう一つの非常に有能なアプリケーションです。どちらも 有料アプリケーション あなたが長期的にそれらを使用することになるなら、それはそれだけで価値があります.

Sassを試してみたいだけの場合 何も払わずに あなたは、端末、またはコアラ（ここで私たちのレビューです）、無料のクロスプラットフォーム機能豊富なアプリを使用することができます。.

変数

頭を包むために最初に必要なことの1つは変数です。あなたがPHPや他の似たようなコーディング言語の背景から来ているなら、これはあなたにとって第二の性質になるでしょう。変数は 再利用可能な情報を格納する, 例えばカラー値のように：

 $ primary_color：＃666666; .button color：$ primary_color;重要：color：$ primary_color;

ここではそれほど便利ではないかもしれませんが、3,000行のコードがあると想像してください。配色が変更された場合は、CSSの各色の値を置き換える必要があります。 Sassを使えば 値を変更する の $ primary_color 可変でそれを使って.

変数は フォント名、サイズ、色、その他多数の情報を保管する. 大規模プロジェクトの場合は、すべての変数を別々のファイルに抽出することをお勧めします（これが近いうちにどのように行われるかについて見ていきます）。これを可能にすることはあなたの全体のプロジェクトを思い出させてフォントと他の重要な側面を変えることです 実際のCSSルールに触れることなく. あなたがする必要があるのはいくつかの変数を修正することだけです.

ネスティング

Sassがあなたに与えるもう一つの基本的な特徴は、 ルールをネストする機能. ナビゲーションメニューを作成しているとしましょう。あなたが持っている ナビ 番号なしリスト、リスト項目、およびリンクを含む要素。 CSSでは、次のようにすることができます。

 #header nav / *ナビゲーションエリアの規則* / #header nav ul / *メニューの規則* / #header nav li / *リスト項目の規則* / #header nav a / *規則リンク用* /

セレクタでは、私たちは自分自身をたくさん繰り返しています。要素に共通の根がある場合は、入れ子にして もっときれいな方法でルールを書く.

上記のコードがSassでどのように見えるかは次のとおりです。

 #header nav / *ナビゲーションエリアの規則* / ul / *メニューの規則* / li / *リスト項目の規則* / a / *リンクの規則* /

ネスティングはとても便利です。 スタイルシートを（もっと）読みやすくする. 適切なインデントと一緒に入れ子を使うことによってあなたは達成することができます 読みやすいコード構造, かなりの量のコードがある場合でも.

入れ子の1つの欠点はそれができるということです。 不必要な特定性につながる. 上記の例では、私はとのリンクを参照しました #header nav a. あなたも使うことができます #header nav ul li a 多すぎるでしょう.

Sassでは、あなたがする必要があるのはあなたのルールをネストするだけなので、非常に具体的になることははるかに簡単です。以下ははるかに読みにくく、かなり具体的です.

 #header nav / *ナビゲーションエリアの規則* / ul / *メニューの規則* / li / *リスト項目の規則* / a / *リンクの規則* /

ルールセットの拡張

オブジェクト指向言語を使っているなら、拡張はおなじみでしょう。それは例を通して最もよく理解されます、お互いのわずかな変化である3つのボタンを作りましょう.

 .ボタンdisplay：inline-block;色：＃000;背景：＃333; border-radius：4ピクセル。パディング：8px 11px。 .button-primary @extend .button; background：＃0091C2 .button-small @extend.button;フォントサイズ：0.9em。パディング：3px 8px。

の .ボタンプライマリ そして .ボタン小 すべてのクラスは .ボタン つまり、それらがそのすべてのプロパティを引き受けてから、自分自身を定義するということです。.

これは、要素のバリエーションを使用できる多くの状況で非常に役立ちます。メッセージ（警告/成功/エラー）、ボタン（色、サイズ）、メニューの種類などはすべて、CSSの効率性を高めるための拡張機能を使用できます。.

拡張の1つの注意点は メディアクエリでは機能しません あなたが期待するように。これはもう少し高度ですが、この振る舞いについてはプレースホルダセレクタの理解で読むことができます - プレースホルダセレクタは特別な種類の拡張です。.

ミックスイン

ミックスインは、プリプロセッサユーザーにとってもう1つのお気に入りの機能です。ミックスインは再利用可能なルールセットです - ベンダー固有のルールや短いCSSルールの短縮に最適.

ホバー要素の遷移規則を作成する方法はどうでしょうか。

 @混合ホバー効果-webkit-transition：背景色200ミリ秒; -moz-transition：背景色200ミリ秒。トランジション：背景色200ミリ秒。遷移：背景色200ミリ秒。ホバー効果を含む。ボタン@ホバー効果;

ミックスインでは、変数を使って以下のこともできます。 mixin内の値を定義します. 上記の例を次のように書き換えることができます。 移行の正確な時期を管理する. たとえば、ボタンの遷移を少し遅くしたい場合があります。.

 @ミキシンホバーエフェクト（$スピード）-webkit-transition：背景色$スピード; -moz-transition：背景色$スピード。 -o-transition：背景色$スピード遷移：背景色$スピード。ホバー効果（200ミリ秒）を含む。ボタン@ホバー効果（300ミリ秒）を含みます。

プレースホルダセレクタ

プレースホルダーセレクターはSass 3.2で導入され、あなたの生成されたCSSコードに少し肥大化を引き起こす可能性がある問題を解決しました。エラーメッセージを生成するこのコードを見てください。

 .メッセージフォントサイズ：1.1em;パディング：11px。ボーダー幅：1px。ボーダースタイル：ソリッド。   -  message-danger @extend .message;背景：＃C20030。色：#fff;ボーダーカラー：＃A8002A。 .message-success @extend .message;背景：＃7EA800。色：#fff;ボーダーカラー：＃6B8F00。

ほとんどの場合、メッセージクラスはHTMLでは使用されません。 拡張用に作成されたもので、現状のまま使用されない. これにより、生成されたCSSに少し肥大化します。コードをより効率的にするために、パーセント記号で示されるプレースホルダセレクタを使用できます。

 ％message フォントサイズ：1.1em;パディング：11px。ボーダー幅：1px。ボーダースタイル：ソリッド。 message-danger @extend％button;背景：＃C20030。色：#fff;ボーダーカラー：＃A8002A。 .message-success @extend％ボタン;背景：＃7EA800。色：#fff;ボーダーカラー：＃6D9700。

この段階では、extendとmixinの違いはなんだろうと疑問に思うかもしれません。プレースホルダを使用すると、プレースホルダはパラメータのないミックスインのように動作します。これは本当ですが、CSSの出力は異なります。違いは 重複ルールのミックスイン しながら プレースホルダーは、同じルールがセレクターを共有することを確認します, 結果としてCSSが少なくなります。.

オペレーション

ここでの失敗に抵抗するのは難しいですが、私は今のところどんな医学的な冗談も控えます。演算子を使用すると、CSSコードでいくつかの数学を行うことができ、かなり役に立ちます。 Sassガイドの例は、これを紹介するのに最適です。

 .コンテナ幅：100％。記事フロート：左;幅：600ピクセル/ 960ピクセル×100％。脇にfloat：right;幅：300ピクセル/ 960ピクセル×100％。

上記の例では、最小限の手間で960pxベースのグリッドシステムを作成しています。次のCSSにうまくコンパイルできます。

 .コンテナ幅：100％。記事フロート：左;幅：62.5％。脇にfloat：right;幅：31.25％。

私が操作のために見つける1つの素晴らしい用途は実際に色を混ぜることです。上の成功メッセージSassを見てみると、背景の色とボーダーが何らかの関係を持っていることは明らかではありません。グレーの陰影を引くことで、色を暗くして、関係を可視化することができます。

 $プライマリ：＃7EA800。 .message-success @extend％ボタン;バックグラウンド：$ primary。色：#fff; border-color：$ primary  - ＃111;

減法された色が明るくなるほど、結果として得られる色合いは暗くなります。追加された色が明るくなるほど、結果として得られる色合いも明るくなります。.

関数

使用する関数は非常にたくさんあります。番号関数、文字列関数、リスト関数、カラー関数など。開発者向けドキュメントの長いリストを見てください。ここでは、それらがどのように機能するのかを示すために、カップルを見てみましょう。.

の 明るくする そして 暗くする 関数は色の明るさを変えるのに使うことができます。これは色合いを差し引くよりも優れています、それはすべてをさらにモジュラーで明白にします。暗くする関数を使った前の例を見てください。.

 $プライマリ：＃7EA800。 .message-success @extend％ボタン;バックグラウンド：$ primary。色：#fff; border-color：darken（$ primary、5）;

関数の2番目の引数は、必要な暗色化の割合です。すべての関数はパラメータを持っています。それらが何であるかを見るためにドキュメントを見てください！これは他のいくつかのわかりやすい色関数です： 彩度の低い, 飽和する, 反転する, グレースケール.

の 天井 PHPと同じように、functionは次の整数に丸めた数値を返します。これは、列幅を計算するとき、または最後のCSSで小数点以下の桁数を多く使用したくない場合に使用できます。.

 .title フォントサイズ：ceil（$ heading_size * 1.3314）;

概要

Sassの機能は、より少ない労力でより良いCSSを書く大きな力を与えてくれます。ミックスイン、エクステンド、関数、変数を適切に使用することで、スタイルシートをより保守しやすく、読みやすく、書きやすくなります。.

もしあなたが他の似たようなCSSプリプロセッサに興味があるなら、私はLESSを見てみることをお勧めします（あるいは私たちの初心者ガイドをチェックしてください）!