3分で簡単にわかる！CSSとSCSSの違いとは？SCSSの書き方や文法もITオタクの会社員ライターが詳しく解説！

ライター／ちょび

ビジネス書が大好きな読書家Webライター。FPの資格やAWSの資格を取得し、金融知識やITについての情報を発信している。

CSSとSCSSの違いとは？

image by iStockphoto

Webデザインを行う際に欠かせないCSSとSCSS。CSSは基本的なスタイルシート言語であり、デザインの様々な要素を制御します。一方でSCSSはCSSよりも高度なデザイン制御を可能にする言語です。では、CSSとSCSSの違いとは何でしょうか？それぞれの特徴を見ていきましょう。

CSS：デザインを整える

CSSはWebページのデザインを整えるために使用されるスタイルシート言語です。CSSはHTMLと同じようなテキストベースの言語であり、色やフォント、余白、レイアウトなどの要素を調整することができます。

CSSは非常にシンプルな言語で、初心者も学びやすく使いやすいのが特徴です。CSSはWebページの見た目を整えるのに欠かせない言語で、Webデザインにおいて非常に重要な役割を担っています。

5分で分かる！HTMLとCSSの違いとは？定義や役割・読み込み方も現役エンジニアがわかりやすく解説

CSSスタイルシートの「id」と「class」の違いは？使い分けや記述方法・優先順位も元企業ホームページ担当がわかりやすく解説

簡単でわかりやすい！CSSの「.（ドット）」と「#（シャープ）」の違いとは？Web制作の基本を現役システムエンジニアが詳しく解説

SCSS：拡張性が高い

SCSSは、CSSの拡張版で、CSSのすべての機能に加えて変数・ネスト・ミックスイン・継承などの機能が追加された言語です。これらの機能によりSCSSはCSSよりも柔軟性があり、拡張性が高いと言われています。しかし、SCSSはCSSと比べると学習難度が高く初心者にはやや難解な部分もあるため、慣れていない人には敷居が高いかもしれません。

SCSSの基本的な文法ルール

image by iStockphoto

CSSの拡張版であるSCSSは、より高度なデザイン制御が可能です。しかしSCSSはCSSに比べて複雑な文法を持っているため、初心者にはやや難解な部分があります。ここではSCSSの基本的な文法ルールについて見ていきましょう。

SCSSの基本的な書き方

SCSSは、CSSと同じようにテキストベースの言語ですが、CSSと同じようにセレクターとプロパティを使ってスタイルを定義するときに変数・ネスト・ミックスイン・継承など追加して機能を柔軟に拡張できることが特徴的です。SCSSで変数を使う場合は以下の例のように「＄」を使って定義することができます。

$main-color: #00ff00;

また、SCSSではネスト（入れ子）を使ってセレクターを簡潔に記述することで、以下のように「nav」というクラスの中にある「ul」と「li」をネストして記述することができます。

nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; margin: 0 10px; a { color: $main-color; text-decoration: none; } } } }

SCSSではミックスイン（Mixin）という機能を使えば、以下のように「box」というミックスインを定義して複数の要素に適用することができます。

@mixin box { border: 1px solid #ccc; padding: 10px; background-color: #f0f0f0; } .box1 { @include box; } .box2 { @include box; border-color: #000; }

CSSで表現できないSCSSの機能

SCSSにある便利な機能の中でCSSでは表現できないものも存在していて、表現できない場合には自動的にSCSSからCSSに変換されて表示されます。以下の機能はSCSSにある特徴的な機能です。

ネスト
ul { li { color: blue; } }

このSCSSはWebサイト上では以下のCSSに変換されます。

ul li { color: blue; }

変数
$primary-color: #007bff; button { background-color: $primary-color; } a { color: $primary-color; }

このSCSSはWebサイト上では以下のCSSに変換されます。

button { background-color: #007bff; } a { color: #007bff; }

Mixin
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

このSCSSはWebサイト上では以下のCSSに変換されます。

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

SCSSはCSSの拡張版であり、CSSで表現できない機能が使えることが最大の特徴です。ネスト・変数・ミックスイン・継承などの機能を使うことで、より効率的なスタイルシートの作成が可能になります。しかし、SCSS専用の文法ルールを覚える必要があるため初心者には少し敷居が高いかもしれません。

SCSSを使うメリット

image by iStockphoto

SCSSは、CSSに比べて機能が多く効率的にCSSを書くことができます。ここではSCSSを使うメリットについて見ていきましょう。

1.コードの記述量を削減することができる

SCSSの変数や関数、ミックスインといった機能を利用することでCSSで書くときに繰り返し書く必要があるコードを簡略化することができます。

例えば、サイト全体のベースカラーが変更された場合、CSSであればすべての箇所で変更する必要がありますが、SCSSであれば変数に定義しておくことで変更が容易です。また、リセットCSSを適用する場合は同じコードを複数のクラスに適用する必要がある場合がありますが、SCSSではミックスインを使ってリセットCSSを定義しておくことができるので高効率で作業を進められるようになるでしょう。

2.ネスト構造でCSSをより明確に表現できる

SCSSでは、CSSにはないネスト構造を使うことができます。これにより親子関係のある要素を明確に表現することができるので保守性や可読性も向上するでしょう。ネストのメリットを以下のようなコードで解説します。

ul { margin: 0; padding: 0; li { display: inline-block; a { color: #333; text-decoration: none; &:hover { text-decoration: underline; } } } }

このコードでは以下のことを定義しています。

・ulタグにマージンやパディングを適用
・liタグにはdisplay: inline-blockを適用
・aタグには色やテキストの下線を付与
・a:hoverにはマウスを重ねたときのスタイルを定義

このように、ネスト構造を使うことで、CSSの構造がより明確になり、保守性や可読性が向上するというメリットがあります。

SCSSの導入方法

image by iStockphoto

SCSSを使ってコーディングすることでCSSの記述が簡単になり、コードの可読性を高めることができます。ここではSCSSを導入するための方法について見ていきましょう。

SCSSを使うための環境構築

SCSSを使うためにはPCの設定が必要です。SCSSの導入方法には大きく2つあります。1つは、SCSSをコンパイルするツールをインストールする方法と、もう1つはSCSSをリンクするHTMLの記述を変更することでSCSSをCSSのように読み込めるようにする方法です。

まずはコンパイルするツールをインストールする方法について説明します。SCSSをコンパイルするためのツールとして、ここでは「Node.js」を使用してコマンドラインから以下のようにコマンドを実行しましょう。

npm install -g sass

これでSCSSをコンパイルできるようになるので、次にコンパイルしたいSCSSファイルを指定して以下のコマンドを実行します。

sass input.scss output.css

次に、ウェブブラウザでSCSSをCSSのように読み込めるようにする方法について説明します。この方法は専用のプラグインやツールを使用する必要がありません。具体的には、以下の手順で設定を行います。

1.HTMLの「style」タグ内で、SCSSを記述します
2.「link」タグ内の「href」属性に、SCSSファイルへのパスを指定します
3.「rel」属性に「stylesheet/scss」と指定します

これで、ブラウザがSCSSを解釈することができます。以上が、SCSSを導入するための方法です。SCSSを使うことで、CSSのコーディングがより簡単になり、開発効率を向上することができます。

3分でわかるダウンロードとインストールの違い！アプリや音楽はどちらで入手するの？類語についても現役Webディレクターがわかりやすく解説！

SCSSで複雑なデザイン作成が簡単になる

本記事では、CSSとSCSSの違いについて解説してきました。

CSSは、基本的な機能しか持たないスタイルシート言語であり、一方でSCSSは、CSSを拡張した言語であり、より高度なスタイルシートの記述が可能です。SCSSを使うことで、コードの記述量を削減することができたり、ネスト構造でCSSを明確に表現することができます。SCSSの基本的な文法ルールや書き方についても解説しましたので、ぜひ参考にしてください。