Sassを使用したモダンなCSS - 実践チュートリアル

CSSプリプロセッサーのおかげで、CSSをはるかに効果的に書くことができます。これらのプリプロセッサーが何であり、どのようなものがあるか、そしてどうしてこの中でSassを選んだのか、このビデオで示されています。

Sass を使用する前に、それをインストールする必要があります。そして、そのための前提条件は Ruby です。つまり、Ruby と Sass のインストールの両方が、このビデオで示されます。その後、Sass のインストールが実際に機能しているかどうかをすぐにテストすることができます。

Sassを使用可能にするために、CSSファイルに変換する必要があります。Watchコマンドを使用すると、個々のファイルやディレクトリ全体での変更を簡単に検出できます。

@importを使用して、SCSSファイルをインポートして結合することができます。ファイル名の前にアンダースコアが付いていることが、このビデオの側面の1つです。

Sassには、変数の宣言の機会があります。この概念は伝統的なCSSでは利用できませんが、Sassではスタイルシートの効果的な開発において優れた手段です。

ネスティングによって、Sassの構文をCSSよりも簡潔に保つことができます。さらに、ネストはコードをはるかにわかりやすく書くのに役立ちます。

@extendを使用すると、CSSプロパティのセットを1つのセレクタから別のセレクタに渡すことができます。これも、Sassファイルをシンプルに保つのに役立ちます。

プレースホルダーセレクタは、モジュールの定義を可能にします。このモジュール化により、Sass構文を論理的なブロックに分割し、異なる場所に組み込むことができます。

Mixinsは、たとえば作業フローを大幅に簡略化できる関数です。このビデオでは、自分自身のMixinsを定義し、最終的に適用する方法が示されています。

この動画で説明されている「セレクタ」を使うと、要素の親要素にアクセスできます。CSSにはこのセレクタがないため、非常に価値があります。

SassはForループの使用を可能にします。これはSassで非常に簡単に機能し、たとえば独自のグリッドシステムを定義するために使用できます。

For-ループの他に、SassではEach-ループやWhile-ループも利用することができます。これらを自動化にどのように活用できるか、このビデオで示されています。

PHPやJavaScriptのような言語では、ifやelseを使ってさまざまなイベントに対応することができます。実際、Sassでも同様の機能が存在します。それをどのように活用するかは、このビデオで示されています。

Sassで計算することができます。これは、フォントサイズの定義に関して便利です。対応する演算子を使うことで、独自のグリッドシステムを構築することもできます。

もちろん、Sassでは色を定義することができます。しかし、Sassは従来のCSSよりもはるかに進んでいます。対応する機能により、たとえば色を簡単に操作することができます。

CompassフレームワークはSassの機能を何倍も拡張します。この最初のビデオでは、Compassのインストールと使用方法を紹介しています。

Compassのプロジェクトウェブサイトはこのフレームワークを使う際の中心情報源です。CompassのCSS3の機能を使って、ドキュメントをどのように利用するかを見せます。

例を示して，Compassを使って簡単にものを実現できる方法を紹介します。このシリーズの最後では，代替となるSassフレームワークについても紹介します。Susyはすっきりしたグリッドシステムを提供します。