スタイルシートの定番・Sassの使い方【入門編】今日から使い始められる！

SassとはSyntactically Awesome Stylesheets、つまり構文的にとても優れたスタイルシートのことで、より柔軟にスタイルを作るための拡張として利用されます。

大きく複雑なCSSを作成したり維持する時には大変便利です。

その便利さをこれからご紹介していきます。

 

 

 

変数

変数はコードを素早く変更できるパワフルな機能です。変数を定義する際にはそこに特定の値を保存します。利用可能な値は数値、文字列、色、nullなど様々です。Sassで変数を宣言するには変数名の前に$マークをつけましょう。ここでは$マークのあとに名前blueを入れ、コロンで区切ってから変数の値を入力します。

 

 

 

実際の例を見てみましょう。

 

 

 

CSSにするとこうなります。

 

 

これは本当に基本的な使い方です。もっと高度なことができるのですが、今回は次のトピックに進みましょう。

 

 

 

ネスト

SassではCSSルールを入れ子にすることができます。CSSの管理と構築を行う上でネスティングは素晴らしい手法で、無駄な繰り返しを避けることができます。例を見てみましょう。

 

 

4段以上のネストは作らないようおすすめします。コードがごちゃごちゃになり、問題が発生しやすくなってしまうからです。

 

 

 

拡張と継承

継承はSassの最も便利な機能のひとつで、拡張を行えばCSSプロパティを共有することができます。拡張は似たスタイルの要素がある時に行いましょう。ここでは例として2つのボタンを作ってみましょう。

 

 

 

コンパイルするとこうなります。

 

 

この機能のパワーが伝わったでしょうか？Sassでは同じ宣言を何度も繰り返す必要はありません、そのためメモリの節約にもつながります。

 

 

 

Mixin

Mixinもとても便利な機能です。MixinでCSSの宣言をグループ化し、再利用することができます。値を引数として渡すこともできます。Sassでは@mixinで定義し、@includeで使用します。ボタンに使うボーダー半径をMixinで作ってみましょう。

 

 

コンパイルするとこうなります。

 

 

 

 

まとめ

Sassは素晴らしいことができる非常にパワフルなツールです。今回紹介したのは基礎的な部分のみですが、それでもその便利さがお分かりいただけたかと思います。効率的にサイトやアプリを制作したいのであれば、ぜひ使ってみてください。

 

 

 

 

 

 

※本記事は、Introduction to Sass for Beginnersを翻訳・再構成したものです。