.net column

.NET開発者のためのブログメディア
Java JavaScript

SCSSとは?基礎を理解してWebサイトを作ろう!

2020年08月27日

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は多機能ではありますが、無料版では購入を促すポップアップが表示されコーディングの邪魔になるため、無料版での使用はおすすめできません。

Visual Studio CodeのLive Sass Compiler

Visual Studio Codeとは、コードエディターです。Visual Studio Code単体ではSCSSのコンパイルすることはできませんが、Visual Studio CodeにはSCSSをCSSにコンパイルするプラグインが用意されています。

それを使用することによって、SCSSファイルの保存と同時にCSSファイルを作成してくれます。

Preprosは多機能であり便利ですが、ポップアップが表示され、コーディングの邪魔になるため、SCSSに入門したての人は、Visual Studio Codeの拡張機能であるLive Sass Compilerをおすすめします。

SCSSの文法紹介とそのメリット

ここからは、SCSSの基本的な文法の紹介と、SCSSを使うことでどのようなメリットがあるか紹介します。

SCSSの入門からスタートしている人も、ある程度独学で勉強している人も、ぜひこの記事を参考にしてください。

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カ所変更するだけで済むので、作業量が減ります。コードの量が多くなればなるほど、修正作業が発生した時の手間が省けます。

 

SCSSの特徴であるネスティング (nesting) について

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

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

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

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

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

SCSSの特徴であるミックスイン (mixins)

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

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

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

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

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

SCSSの特徴である継承 (inheritance) について

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

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

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

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

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

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

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

SCSSで効率よくコーディングをしよう

SCSSの入門として、SCSSを使用することによるメリットや具体的な文法について、いくつか紹介してきました。

SCSSを利用することで、効率よくスタイルを指定してコードが書けるようになり、見やすくメンテナンスがしやすいコードになるでしょう。ぜひSCSSにまだ入門していない方は、入門してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)