SCSSとSASSは、CSSを使用する人にとって、耳にする機会が多い言語ではないでしょうか。効率的なコーディングを行う上で、便利であるという評価を知っているものの、まだ触れたことがないという人もいることでしょう。使いはじめるとすっかりその便利さにはまってしまうと思いますので、ぜひ触れておきたいところです。今回はSCSSとSASSにスポットをあてて、2つの違いや書き方、導入方法など必要となる基本的な知識をまとめました。コーディングに対する認識が大きく変わるかもしれません。これから入門を検討されている皆様のお役に立てていただければ何よりです。

SCSS／SASSとは

SCSSとSASSは、Sass（Syntactically Awesome Style Sheets）というRuby製のCSSメタ言語です。Sassはハンプトン・キャトリン氏が設計、ネイサン・バイゼンバウム氏が開発したものとして知られています。SassはCSSを効率的に記述できるように設計・開発された言語であり、CSSの場合、長く複雑になってしまう記述であっても、わかりやすくシンプルに書けるというところが特徴です。小規模のホームページの制作では、コーディングにそれほど手間に感じなかったとしても、規模が大きくなるとその手間はとても大きなものになるでしょう。コードを見直すのも大変ですし、やはりシンプルさは重宝します。それでは、効率的でありシンプルなSCSS／SASSには、具体的にどのようなメリットがあるのでしょうか。以下にピックアップしました。

ネスト（入れ子構造）が利用できる

CSSとのもっとも大きな違いでもありますが、ネスト（入れ子構造）による記述が可能なため、記述量を減らすことができます。そして、ネストにより記述がわかりやすくなるのです。一箇所に記述がまとまることでCSSを読むよりも見落としが少なくなるでしょう。

変数が使える

変数は繰り返し使うカラーコードなどを定義すれば、何度でも簡単に利用できる機能です。変数を使えば、修正が生じても最小限の修正量で作業が済むので効率的です。変更がよく生じるところや、何度も記述するしなければいけない部分に利用します。

mixinが使える

@mixinを使えば、コードの塊を作っておいて、別のところから呼び出すことが可能になります。修正が必要な場合は、この塊のコードを変更するだけですので修正作業の効率化にとても役立ちます。

スタイルシートを分割できる

これは管理上において大きなメリットです。あとで確認や修正を行う際、スタイルシートがわかりやすく分割されていると、すぐに目的のファイルを見つけることができます。修正したい部分を見つけるまでの労力の大きさに悩んでいる方には大きな改善となるでしょう。

条件処理や関数が使える

条件分岐や繰り返しなどの制御が可能です。そのため、少ない量のコード記述でも連続した処理など、色々なことができます。

コメントが2種類ある

SCSS／SASSは、CSSと同じ書き方でコメントを入れることができます。SCSS／SASSならではのコメントの書き方もありますが、それはコンパイルをすると消えます。用途によって、上手に使える機能です。

上記のように色々なメリットをご紹介しましたが、一つだけSCSS／SASSを使う場合ならではの必須作業が存在があります。実は、SCSS／SASSは記述しただけでは利用できず、コンパイルが必要になります。コンパイルには手間がかからないので問題ありませんが、必要であることだけは覚えておいてください。

SCSSとSASSの違いとは

SCSSとSASSの違いは、書き方であり、SCSSの方が一般的に使用されています。そもそもSCSSは、SASSがCSSとの互換性が十分ではなかったため開発されたものであり、SCSSの方がスタンダードになっているのは当然の流れとも考えられます。しかもSCSSなら、SCSS独自の書き方だけではなく、いつも通りのCSSを書くことも可能なため便利です。また、SCSSとSASSの違いとして、当然である部分ですが、拡張子が異なることも挙げておきます。SCSSが「.scss」であることに対し、SASSは「.sass」です。書き方については、後ほど触れていきますが、大きなポイントとしては、SCSSがカッコ（{ }）を使い、入れ子構造を記述できるところでしょう。

SCSS／SASSの導入方法とは

ここからは、SCSS／SASSの導入方法についてご説明します。

１）Rubyをインストールする

まずはRubyをインストールします。Macを使っている方は、標準でRubyがインストールされているので、この作業は不要です。Windowsを利用している方はRubyを配布サイトからダウンロードします。PCの環境によってダウンロードをするファイルが異なりますので、使用するPCに基づいてご確認ください。
※Rubyの詳細なダウンロード方法や設定に関してはダウンロードサイトにてご確認ください。

2）Saasをインストールする

Rubyをインストールし終えたら、次はSaasをインストールします。Macはターミナルを使います。Windowsは、RubyGemsシステムを使います。コマンドプロンプトから「gem install sass」を実行して、Saasをインストールします。コマンドによりSaasがインストールされたことを確認して終了です。

3）コンパイラをインストールする

前述したように、SCSS／SASSで記述したコードはそのまま使用できません。そこでコンパイルをしなければいけないのです。手動で「sass style.scss:style.css」というコマンドを実行する方法と、「sass --watch style.scss:style.css」というコマンドにより自動的にコンパイルするように設定する方法があります。これ以外の方法として、変換ツールがあります。中でもKoalaというフリーソフトがMacとWindowsの両方に対応しており有名です。

SCSS／SASSの書き方

それでは、SCSSとSASSの書き方について例を挙げて解説しましょう。同じコードをCSS、そして、SCSSとSASS、それぞれで書いた場合を用意しました。これらの違いについてあらためてご覧いただければ幸いです。

まず、CSSの場合として以下にシンプルな例を記述します。.productsクラスにある.textの幅を指定するために、このような記述をしています。

【CSSで記述した例】

.products .text {
   width: 300px;
}

SCSSの書き方

多くの方が使用しているSCSSに関しては、ネスト（入れ子構造）による書き方が最大の特徴です。「 { 」の使う位置により、.productsクラスにある.textの位置関係が明確にみえるのでネスト（入れ子構造）は見やすい記述だということがわかるでしょう。

.products{
       .text {
         width: 300px;
       }
}

SASSの書き方

SASSの記述をすると、「 { 」が無くなるので、見慣れない雰囲気を感じる方も多いでしょう。位置関係はインデントのみで表しています。

.products
   .text
      width: 300px

短いコードですが、それぞれの違いを感じていただけましたか。SCSSの記述がいかにわかりやすい構成であるか実感いただけたかと思います。SASSの場合、さらにシンプルではあるものの、SASSの課題改善から生まれたSCSSを実践したいものです。

まとめ

SCSS／SASSが、ぜひ導入したいコードの書き方であることはご理解いただけましたでしょうか。
コードの記述が少なく作業的な負担の削減と管理上の利便性の高さは、ホームページの制作時から運用にわたるまで長くメリットを生むことになります。スタンダードに利用されているSCSSを使えば、CSSを記述することも可能なので、SCSSへのシフトにあたっての負荷もあまりないでしょう。

SCSSの利用は、特に規模の大きいホームページを制作する方にオススメしたいところですが、まずは小規模のホームページで手応えを感じてみるのもよいのではないかと思います。多くの方が痛感しているかと思いますが、ホームページの制作にあたり作業の効率化は非常に重要なのです。この機会にSCSSに触れてみてはいかがでしょうか。

もっとCSSの使い方を知る

CSSで背景を作る。backgroundプロパティの使い方を解説

CSSで背景を作る。backgroundプロパティの使い方を解説

ホームページ制作を行う際、必要になるのが背景の設定です。背景は面積が広い分、全体の印象を大きく左右する重要な役割を果たします。背景の設定にはCSSを使うことが多いのですが、背景を設定することは決して難しい作業ではありません。背景に好きな色をつけたり、画像を配置することも簡単です。今回はCSSを使った背景の設定方法をご説明します。
CSSでpositionを使い要素を並べる｜static、relative、absolute、fixedを解説

CSSでpositionを使い要素を並べる｜static、relative、absolute、fixedを解説

今回のテーマはCSSの要素の並べ方です。static、relative、absolute、fixedを解説します。初心者のうちは、なかなか難しい位置決めですが、少しでもわかりやすく説明したいと思います。