Sass を使用して CSS 開発を改善する

プログラミングが持つ柔軟性と機構を採り入れる

Sass (Syntactically awesome stylesheets) はメタ言語であり、CSS (cascading stylesheets) プリプロセッサーでもあります。CSS 開発の効率を高め、開発期間を短縮するには、Sass の基礎を理解することがカギとなります。CSS を開発するための Sass の構文は、シンプルで洗練されている上に堅牢であるため、Sass を使用することで扱いやすいスタイルシートを作成することができます。Sass について紹介するこの記事では、Sass を使用して Web サイトのスタイルシートを改善する方法の基礎を学びます。

2013年 8月 22日 ― 「参考文献」に新しい項目「LESS を使用して CSS でもっと多くのことを行う」を追加しました。

Alex Starostin, QA Engineer, IBM

Photo of Alexander StarostinAlex Starostin は、IBM オーストラリアの開発研究所の品質保証エンジニアです。彼の主な担当は、アジャイル環境における開発チームを対象とした、ソフトウェア・テストと QA サポートです。通常の業務とは別に、Alex は好んで新しいテクノロジーやプログラミング言語を学ぶために時間を割いています。



2013年 8月 22日 (初版 2013年 6月 27日)

スタイルシートを開発する場合、Sass (Syntactically awesome stylesheets) を使用すると開発全体の様相を大きく改善することができます。Sass は、昔からのプログラミングが持つ性質を利用して CSS (Cascading StyleSheets) の開発をできるようにするスタイルシート言語兼 CSS プリプロセッサーです。Sass には、変数、スタイルの論理ネスト、ミックスイン、引数、継承などのプログラミング機構が採り入れられています。Web サイトのスタイルシートを開発する際に Sass を利用すると、Sass を標準的な CSS マークアップに変換すればよいため、作業を大幅に単純化することができます。

この記事では Sass の重要な基礎を学びます。この記事で紹介する実用的な例では、Sass を使用して CSS の開発期間を短縮し、効率を高める方法を実際に示します。

SCSS (Sassy CSS) は CSS3 のスーパーセットです。SCSS コードはすべて有効な CSS コードです。この記事で紹介するコード・サンプルは SCSS です。

なぜSass を使うのか

Sass の構文

  • SCSS は最も一般的な構文であり、CSS の構文のスーパーセットです。
  • インデント付きの構文である .sass は古い構文であり、行をインデントすることによってブロックを規定します。

Sass には、CSS を開発するためのソリューションとして、堅牢かつ構成可能で、機能が豊富であるという特徴があります。Sass は昔ながらの静的な CSS ルールの代わりに、動的構成体による方法を使用します。皆さんが日々の開発作業の中で使用しているのと同じプログラミング・スタイルに従いつつ、プログラミング言語の構成体を利用したい場合には、Sass が最適です。きっと皆さんは Sass の柔軟性と豊富な機能に驚くはずです。

CSS プリプロセッサーは、あらゆる Web 開発環境に欠かせないものとなっています。CSS プリプロセッサーを使用すると、以下のことが可能になります。

  • 開発期間を短縮すること
  • DRY (Don't Repeat Yourself) 原則を CSS 開発に適用すること
  • コードをすっきりと読みやすくすること

CSS プリプロセッサー技術は数多くあります。この記事で Sass を使用する理由は、Sass には多くの機構があって柔軟であるためです。

Sass をインストールする

Sass は主に Ruby で実装されていますが、他の実装もあります。最初のステップは、Sass の Ruby コンポーネントを使用して Sass をインストールすることです。

  1. お使いのシステムに Ruby がインストールされていない場合には、Ruby をダウンロードしてインストールします。
    • Windows ユーザーの場合: RubyInstaller for Windows を使用します。
    • Mac OS X の場合: Ruby は既にオペレーティング・システムにインストールされています。
    • Linux の場合: お好みのパケット・マネージャーを使用して Ruby をインストールします。
  2. コマンド gem install sass を実行して Sass の Ruby gem をインストールします。

Sass 環境を準備する

お好みのテキスト・エディターを使用して .scss という拡張子のファイルを作成します。Sass のサポート・レベルはテキスト・エディターによって異なります。「参考文献」に、さまざまなレベルで Sass 構文の強調表示をサポートする各種テキスト・エディターを一覧にまとめたサイトへのリンクを記載してあるので参照してください。

その新しい .scss ファイルにリスト 1 のコードをコピーして貼り付けます。

リスト 1. Sass コードのサンプル
#blueBar {
position: relative;
height: 37px;
left: 0;
right: 0;
top: 0;
}

Sass 言語は CSS3 のスーパーセットです。Sass バージョン 3.2.1 では、有効な CSS はすべて、有効な Sass でもあります。リスト 1 のコードは有効な CSS であり、有効な Sass でもあります。それでもなお、リスト 1 の Sass を CSS に変換する必要があります。変換をしないと、Web ブラウザーはスタイルシートを適切に解釈することができません。毎回 sass-convert コマンドで Sass を CSS に変換するのではなく、ファイルを保存するたびにファイルを CSS に自動変換するように Sass を設定しましょう。Sass にファイルを自動監視させるには、コマンドライン・アプリケーションでリスト 2 のコマンドを実行します。

リスト 2. ファイルを監視する
sass --watch
style.scss:style.css

Sass とリスト 3 のコマンドを使用してディレクトリー全体を監視することもできます。

リスト 3. ディレクトリーを監視する
sass --watch
stylesheets/sass:stylesheets/compiled

これでフレームワークができあがり、Sass ファイルが保存されるたびに Sass が自動的にコードを有効な CSS に変換するようになりました。では作業を始めましょう。


変数

CSS にはない重要な機構が変数です。スタイルシートには多くの繰り返しが含まれがちです。これに対処する有効な方法は、ある値を一度記述したら、そのエイリアスを利用してその値を再利用することです。例えば、リスト 4 のようなスタイルシートがあるとします。

リスト 4. CSS の要素と色
#someElement { color: #541B32; }
#anotherElement { color: #541B32; }
#yetAnotherElement { color: #541B32; }

標準的な CSS では、すべての値を明示的に記述する必要があるため、リスト 4 のように冗長に値を記述することになります。一方 Sass では、リスト 5 のような効率性を持ったコードになります。

リスト 5. Sass の要素と色
$purplishColor: #541B32;
#someElement { color: $purplishColor; }
#anotherElement { color: $purplishColor; }
#yetAnotherElement { color: $purplishColor; }

メリットは明らかです。今度は複数の要素の色を 1カ所で変更することができます。リスト 5$purplishColor は変数なので、いつでも Sass ファイルの中で色を変更することができます。Sass の変数には型がありません。そのため同じ変数に対して、文字列、整数、さらには色コードなどを割り当てることができます。


モジュール

CSS コードを個々のモジュールに分割し、それを Sass エンジンによってつなぎ合わせることも容易にできます。@import ディレクティブを使用すると、モジュールをインポートすることができます (リスト 6)。@import ディレクティブの引数は、ファイル名かハイパーリンク、あるいはその他任意のパスです。CSS ファイルと SCSS ファイルの両方をロードして 1つの文書に合体することができます。

リスト 6. Sass でモジュールをインポートする
@import "colors.scss"
@import "links.scss"

コードの分割方法は CSS と Sass とで根本的に異なります。CSS コードを小さなスタイルシートに分割すると、各スタイルシートは別々の HTTP リクエストでロードされます。Sass の @import ディレクティブはモジュールのコードを直接読み込むため、最終的には常に 1つの CSS ファイルになります。


文字列とインターポレーション

Sass は、文字列の連結や、変数のインターポレーション (挿入) をサポートしています。プロパティーの値にのみ変数を使用するのではなく、プロパティーやセレクターの名前に変数の値を直接挿入することもできます (リスト 7)。

リスト 7. Sass での文字列操作と変数操作
$image_dir: 'images/web/';
$page: 10;

.button
{
background-image: url( $image_dir + 'image.gif' );
:before { content: "Page #{ $page }"; }
}

リスト 7 のコードを変換するとリスト 8 の CSS になります。

リスト 8. 文字列操作と変数操作の CSS での結果
.button {
background-image: url("images/web/image.gif"); }
.button:before {
content: "Page 10"; }

数学演算

Sass は数値を扱うための標準的な数学演算子をサポートしています (リスト 9)。変数の値を使用して単純な数学演算を行うことができます。

リスト 9. Sass での数値に対する数学演算
.block {
$block_width: 500px;
width: $block_width - ( 10px * 2 ) - ( 1px * 2 );
}

リスト 9 のコードのコードを変換するとリスト 10 の CSS になります。

リスト 10. 数値に対する数学演算の CSS での結果
.block {
width: 478px; }

色に対する数学演算もサポートされています (リスト 11)。

リスト 11. Sass での色に対する数学演算
.block {
$color: #010203;
color: $color;
border-color: $color - #010101;
}

リスト 11 のコードを変換するとリスト 12 の CSS になります。

リスト 12. 色に対する数学演算の CSS での結果
.block {
color: #010203;
border-color: #000102; }

セレクターとプロパティーのネスト

CSS の中で最も価値のある機構の 1 つがセレクターのネスト (セレクター内にあるセレクターにスタイルを適用すること) です。CSS でセレクターをネストするには、定義する子セレクターごとに親セレクターを記述するという冗長な作業が必要です。このプロセスを単純化するために、Sass ではリスト 13 のようにセレクターをネストします。

リスト 13. Sass でのセレクターのネスト
#some {
border: 1px solid red;
.some { background: white; }
}

リスト 13 のコードを変換するとリスト 14 の CSS になります。

リスト 14. CSS でのセレクターのネスト
#some { border: 1px solid red; }
#some .some { background: white; }

制御ディレクティブ

Sass の制御ディレクティブは、CSS コードにフローとロジックを提供するものです。このセクションで説明する基本的な制御ディレクティブは、@if、@for、@each です。

@if

Sass は基本的な if/else 関数をサポートしており、これらの関数を CSS にコンパイルします。例えばリスト 15 では、ベースの色が黒でないすべてのリンクの色を黒にします。ベースの色が黒のリンクの色は、白に設定します。

リスト 15. Sass での @if の例
$color: black;

.link {
@if $color == black {
color: white;
} @else {
color: black;
}
}

リスト 15のコードを変換するとリスト16 の CSS になります。

リスト 16. @if の例の CSS での結果
.link {
color: white; }

この場合の @if は、他のプログラミング言語の場合と同様に機能します。@if 文の後には、いくつかの @else if 文と 1 つの @else 文が続きます。@if 文の結果が真にならない場合、@else if 文が順に実行され、そのうちの 1 つが真になるか @else に達するまで、それが続けられます。

@for

@for ディレクティブは、一連のスタイルを繰り返し出力します。各繰り返しに対し、カウンター変数を使用して出力を調整します (リスト 17)。

リスト 17. Sass での @for の例
@for $i from 1 through 5 {
.button-#{$i} { width: 1px * $i; }
}

リスト 17 のコードを変換するとリスト 18 の CSS コードになります。

リスト 18. @for の例の CSS での結果
.button-1 {
width: 1px; }
.button-2 {
width: 2px; }
.button-3 {
width: 3px; }
.button-4 {
width: 4px; }
.button-5 {
width: 5px; }

@each

@each ディレクティブは、リストから項目を取得して、リストに記載されている値を使用してスタイルを出力します (リスト 19)。

リスト 19. Sass での @each の例
@each $company in IBM, Motorola, Google {
.#{$company}-icon {
background-image: url('/images/#{$company}.jpg');
}
}

リスト 19 のコードを変換するとリスト 20 の CSS コードになります。

リスト 20. @each の例の CSS での結果
.IBM-icon {
background-image: url("/images/IBM.jpg"); }
.Motorola-icon {
background-image: url("/images/Motorola.jpg"); }
.Google-icon {
background-image: url("/images/Google.jpg"); }

関数

Sass では、関数を適用することができます。成功を収めた手法の核となる部分をリファクタリングして抽象化することを計画してください。そうすることで、その手法を次のプロジェクトで再利用したり、そのまま移植したりすることが可能になります。

Sass には数多くの組み込み関数があります。例えば、リスト 21 のように rgb()darken() を使用して色を操作することができます。色に関して、色相、彩度、明度、不透明度、粘性スケール、その他数多くの側面を変更することができます。また、独自の関数を定義し、その関数を必要に応じて再利用することもできます。

リスト 21. Sass の関数
#someElement {
color: rgb(150, 50, 100);
}
#someDarkYellowElement {
color: darken(yellow, 33%);
}

リスト 21 のコードを変換するとリスト 22 の CSS コードになります。

リスト 22. 関数の CSS での結果
#someElement {
color: #963264; }
#someDarkYellowElement {
color: #575700; }

Sass には、数式、文字列、リスト、イントロスペクション、その他のための関数が含まれています。Sass の関数の完全な一覧については「参考文献」を参照してください。


ミックスイン

ミックスインは CSS コードの一部分を再利用するものであり、リスト 23 のように @mixin ディレクティブを使用して定義されます。ミックスインを使用すると、プロパティーと値のペアのパターンを定義することができ、それらのパターンを他のルール・セットで再利用することができます。ミックスインは、スタイルシートを単純化したり読みやすくしたりするのに役立ちます。基本的に、@mixin はユーザー定義関数です。ミックスインも引数を取ります。つまり、ほんのわずかなミックスインを使用して多種多様なスタイルを生成することができます。

リスト 23. Sass のミックスイン
@mixin rounded-corners($radius: 5px) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}

#header {
@include rounded-corners;
}
#footer {
@include rounded-corners(10px);
}

リスト 23 のコードを変換するとリスト 24 の CSS になります。

リスト 24. ミックスインの CSS での結果
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px; }

#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px; }

関数とミックスインは似ています。どちらも変数を受け付けますが、関数が必ず値を返すのに対してミックスインはコード行を出力する点が異なります。


Compass

Compass は、オープンソースの CSS オーサリング・フレームワークであり、Sass スタイルシート言語を使用します。Compass には (ミックスインを使用する) 再利用可能な設計パターンがいくつかあり、それらのパターンを利用すると、確実で強力なスタイルシートを作成することができます。Compass に含まれている一般的なコードのライブラリーは Sass 開発に不可欠のツールです。

基本的に CSS に対するラッパーである Compass は、ブラウザーの互換性、レイアウト、スタイルシート最適化といった CSS に関する一般的な問題をスプライティングやその他の手法で処理します。

Sass と同様、Compass も Ruby gem としてパッケージ化されています。Compass をインストールするには、コマンドラインから「gem install compass」と入力します。

すると、Compass フレームワークで定義されたミックスイン (関数) を使用できるようになります。Compass には、定義済みの関数、クラス、ネイティブ CSS3 サポートが数多く用意されています。Compass についての詳細は「参考文献」を参照してください。


まとめ

この記事では、Web サイトに適切に Sass を実装する上で役立つ概念をいくつか紹介しました。そして変数、インターポレーション、ネスト、関数、いくつかのディレクティブについて説明しました。

インターネット上にある CSS プリプロセッサーは Sass だけではありません。Sass に最も近い競合 CSS プリプロセッサーである LESS (「参考文献」を参照) も一定のマーケット・シェアを占めています。突き詰めてみると、Sass と LESS との違いはわずかです。Sass の最も重要な資産は、LESS にはない拡張機能である Compass です。どの CSS プリプロセッサーが皆さんのスタイルに合い、皆さんのニーズを満たすのかを判断するために、できるだけ多くの CSS プリプロセッサーを試してみることが重要です。

参考文献

学ぶために

  • Sass: チュートリアル、ドキュメント、ブログなどを調べることで、CSS に対するメタ言語である Sass について学んでください。
  • Sass をサポートするテキスト・エディター: さまざまなレベルで Sass をサポートするテキスト・エディターの一覧を参照してください。
  • Sass の関数リスト: この Sass の関数の包括的なリストを調べてください。
  • Compass: このオープンソースの CSS オーサリング・フレームワークについて学んでください。
  • LESS: 動的スタイルシート言語である LESS についての詳細な情報を入手してください。
  • LESS を使用して CSS でもっと多くのことを行う」(Uche Ogbuji 著、developerWorks、2013年8月): LESS を使用して、理解しやすく保守が可能な CSS (Cascading Style Sheets) を作成し、最新の Web ページ向けのレスポンシブ・デザインのスタイルの作成、保守を単純化してください。
  • 「Sass vs. LESS」: この記事を読んで、どの CSS プリプロセッサー言語を選ぶべきかのガイダンスとしてください。
  • developerWorks Web development ゾーン: さまざまな Web ベースのソリューションを話題にした記事を調べてください。広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、Web development の技術文書一覧を参照してください。
  • developerWorks テクニカル・イベント: これらのセッションで最新の技術情報を入手してください。
  • developerWorks 最新イベント情報: IBM の製品およびツールについての情報や IT 業界の動向についての情報を迅速に把握してください。
  • developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
  • Twitter での developerWorks: 今すぐ登録して developerWorks のツイートをフォローしてください。

製品や技術を入手するために

  • Sass をダウンロード して使ってみてください。
  • IBM 製品の評価版をダウンロードして、DB2、Lotus、Rational、Tivoli、および WebSphere のアプリケーション開発ツールとミドルウェア製品を使ってみてください。

議論するために

  • developerWorks コミュニティー: ここでは他の developerWorks ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、Wiki を調べることができます。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=934974
ArticleTitle=Sass を使用して CSS 開発を改善する
publish-date=08222013