SE

SCSSとはどんな言語なのでしょうか？

PM

SCSSはプログラム言語ではなく、Rubyで作られたメタ言語のことです。実際のソースを見ながら理解を深めていきましょう。

SCSSとは何か

SCSSとは、Sassの構文の一つであり、ウェブページのスタイルを指定するCSSをより効率よく記述するためのものです。

Sassとは「Syntactically Awesome Stylesheets」の略で日本語に訳すと、「構造的にすばらしいスタイルシート」という意味です。

SCSSは、CSSと同様「{…}」でブロックを作り、文末に「;」を使います。あらゆる構文を使うことができるCSSの拡張版です。

CSSはコーディングを進めるにつれて、より肥大化し、複雑になり、メンテナンスが難しくなっていきますが、SCSSはそれらを抑え、効率的に、読みやすくメンテナンスのしやすいコードを書くことができます。

SCSS入門におすすめのコンパイルする方法

SCSSを使うことによって、効率よく見やすいコードを書くことができますが、そのコードを使用するためには、CSSにコンパイル、すなわち変換する必要があります。

コンパイルする方法を2つ紹介します。まだSCSSの入門を始めたばかり、もしくはこれから始めようと考えているという人は、2つ目の方法を試してみて下さい。

Prepros

Preprosは、SassをCSSに変換するGUIコンパイラです。

scssをCSSにコンパイルする以外にも開発に便利な機能が備わっており、HTMLやCSSを更新すると自動でブラウザがリロードされたり、スマートフォンからでも確認できるようにローカルサーバーが用意されています。

scssの入門から勉強を始めている人にとっては、便利で嬉しい機能が搭載されています。しかし、Preprosは多機能ではありますが、無料版では購入を促すポップアップが表示されコーディングの邪魔になるため、無料版での使用はおすすめできません。

SCSSの5つの文法紹介とメリット

次にscssの基本的な文法の紹介を致します。scssを使うことでうまれるメリットについても紹介致します。

scss入門から学んでいる方、独学で学んでいる方も是非参考にして下さい。

1：SCSSの変数 (variables)

SCSSでは、変数が使用できます。繰り返し使うような値を変数に格納しておけば、メンテナンス時に変更したい箇所が出て来た時に、少ない作業量で済みます。

以下のコードはSCSSで書いており、「$main-color」という変数に「red」をいれ、「h1タグ」「h2タグ」「h3タグ」それぞれの「color」に、その変数「$main-color」を設定しています。

もし、赤にしている部分を青に変更したいとなった場合、「$main-color:red;」の部分を「$main-color:blue;」に変更するだけで、「h1タグ」「h2タグ」「h3タグ」すべてに反映されます。

以下は上記SCSSで書かれたコードをCSSで書いたものですが、「h1タグ」「h2タグ」「h3タグ」すべての色を青に変更したいとなった場合、3カ所変更する必要がでてきます。

SCSSであれば1カ所変更するだけで済むので、作業量が減ります。コードの量が多くなればなるほど、修正作業が発生した時の手間が省けます。

2：SCSSのネスティング (nesting) について

SCSSの特徴としてネスト（階層化構造）を利用できます。

ネストにより、CSSの全体の記述量を減らすことができたり、htmlファイルの構造をイメージしやすくなったりするため、読みやすく、メンテナンスのしやすいコードになります。

以下はSCSSで書いたものです。

上記で紹介したSCSSをCSSにコンパイル（変換）すると、以下のようになります。

今回紹介しているコードは単純で小さなコードなので、メリットは感じにくいかもしれませんが、規模が大きくなるにつれて、コードを階層化できていることで読みやすく、非常にメリットを感じるはずです。

3：SCSSのミックスイン (mixins)

「@mixin」を使うことによって、修正作業の効率化を図ることができます。

以下はSCSSのコードですが、@mixinでコードの塊を作成し、別の場所でそれを呼び出すことができます。

以下は「hoge」という「mixin」を作成し、それを「.test」、「.test2」で呼び出しています。

上記SCSSのコードをCSSで書き直すと、以下のようになります。

「@mixin」は入門者にとっては少し難しいかもしれませんが、使いこなせば、より効率よく見やすいコードが書けるようになるでしょう。

4：SCSSの継承 (inheritance)

SCSSの継承 (inheritance) とは、親要素で指定したものが継承して適用されるものです。

以下のSCSSでは「%test-shared」でスタイルを指定し、「.test1」や「.test2」の
「@extend %test-shared;」のコードにて「%test-shared」で指定したスタイルを継承しています。

上記SCSSのコードをコンパイルすると以下のようなCSSが生成されます。

このように、共通するプロパティは一つの塊にまとめられ、その差分だけが「.test2」の「border-color: green;」を表示されます。

こちらも入門者にとっては少し難しいかもしれませんが、挑戦してみてはいかがでしょう。

5：SCSSのコメント

scssを使用することでCSSコードが見やすく、変更時も少ない作業で変更可能になります。

ご紹介した文法をマスターし活用することで、効率がいいスタイルのコードが書けるようになります。メンテナンスもしやすくなるので是非お試し下さい。

もっと詳しく学びたい方はscss入門書も出ていますので確認してみて下さい。

「SASS」と「SCSS」の書き方とは？

SassはCSSを拡張した言語のことです。ファイルの拡張子として、SASS記法とSCSS記法の2つの記法があります。

Sassの2つの記法のうち多く使用されているのはSASS記法です。

SCSS記法

SCSS記法は主にCSSにネストを使用したコードです。そのためスタイルの書き方はCSSとさほど変わりません。

SCSS記法やSCSSファイルと書かれることが多いです。

Sassの記法2つのうち後に作られました。

SASS記法

SASS記法はコードを書く際に「{…}」を使わず、文末に「;」も付けません。インデントを主としている簡単な記法です。

SASS記法やSASSファイルと書かれることが多いです。

Sassのうち最初に作られた記法です。

SE

シンプルに効率よくCSSコードがかけるということですね？

PM

そうです。わかりやすくシンプルなコードを書くことができます。

SCSSを理解してコーディングに活かそう！

通常Sassを使う際はSCSS記法を使用します。scssを使用することでのメリットがたくさんあることを理解していただけたと思います。

一度文法をマスターしてしまえばシンプルで分かりやすくメンテナンスしやすいコードが書けるようになります。コーディングの際に是非SCSS記法を活かして下さい。