違いを解説君

あるゆる物事の"違い"をわかりやすく解説する情報マガジン

スクリプト

ITの違い

【Sass】SCSSとSASSの違いをわかりやすく解説!使い分け方はあるの?

HTMLの記述に欠かせないCSS(Cascading Style Sheets)。

ネスト(入れ子構造)が利用できなかったり、変数が使えないなど、意外に面倒な点が多いですね。

それを解決するための道具に『Sass』があります。

ところが、『Sass』には『SCSS』と『SASS』の2種類があるのですね。

いったい、両者にはどんな違いがあるのでしょうか?

 

はなこ
『Sass』って、CSSを記述する時に便利だって聞いたことがあるんだけど、どんなものなの?
CSSの記述を簡単にするためのツールだよ。

『SCSS』と『SASS』の2種類があるって聞いたことがあるけど。

たろう
はなこ
その2つの違いって、いったい何なの?
僕も、違いについては知らないんだ。
たろう
はなこ
うーん、便利なら使ってみたいな。

ちょっと、調べてみようかな。

 

今回は、『Sass』の『SCSS』と『SASS』の違いについて解説し、使い分け方をチェックします。

スポンサーリンク

『Sass』とは?

『SCSS』と『SASS』の違いについて解説する前に、『Sass』について簡単に復習しておきましょう。

 

『Sass』は、『Syntactically Awesome Stylesheets』の略で、CSSの記法にプログラミング言語の文法を取り入れた、新たなスタイルシート言語です。

大まかに、CSSに対して次の機能が追加されています。

  • ネスト(入れ子構造)
  • 変数
  • mixin
  • 条件分岐や繰り返しの制御
  • スタイルシートの分割

設計者は『ハンプトン・キャトリン』で、公式にはRubyで実装されたオープンソースが公開されています。

他にも、C++やDartで実装された『Sass』があります。

 

【Sass】『SCSS』と『SASS』の違い

『SCSS』と『SASS』は、『Sass』で利用することのできる構文の種類を表します。

それぞれの主な違いをまとめると、次のようになります。

『SCSS』と『SASS』の違い

  • 『SCSS』は、C言語などと同じように波括弧でブロックを表し、『SASS』はPythonと同じようにインデントでブロックを表す
  • mixinの記法は、『SCSS』が@mixin/@includeで、『SASS』が=/+である。
  • 『SCSS』のファイルの拡張子は『.scss』で、『SASS』のファイルの拡張子は『.sass』である。

それでは、順番に細かく見てみましょう。

 

ブロックの表現

『SCSS』は、C言語などと同じ波括弧によるブロック表現です。

しかし、

『SASS』は、Pythonのようにインデントでブロックを表します。

これは、例を見るほうが分かりやすいでしょう。

div {

_background-color: black;

}

div span {

_font-size: 2rem;

}

上の例は、CSSで記述したものですね。

div要素に対して背景色を黒色に、さらにdiv要素の中のspan要素のフォントサイズを2文字分にしています。

これを『SCSS』で記述すると、次のように表すことができます。

div {

_background-color: black;

_span {

__font-size: 2rem;

_}

}

『SASS』ならば、次のように表すことが可能です。

div

_background-color: black

_span

__font-size: 2rem

『SCSS』はC言語に、『SASS』はPythonに近い記述の仕方ですね。

『SASS』の場合、『SCSS』では必須のセミコロンが末尾に付いていないことに注意して下さい。

『SASS』では、末尾のセミコロンも不要です。

 

mixinの記述方法

『SCSS』では、mixinを利用する時、@mixin/@includeの組み合わせで使います。

それに対して、

『SASS』の場合は、=/+の組み合わせです。

これも例を示しましょう。

次のCSSを作りたいとします。

div {

_font-size: 9px;

_font-size: 1.5rem;

}

これをmixinを使って記述すると、『SCSS』の場合は次のようになります。

@mixin fs($sz) {

_font-size: $sz + px;

_font-size: $sz / 10 * 1rem;

}

_

div {

_@include fs(9);

}

『SASS』になると、次のように記述することが可能です。

=fs($sz)

_font-size: $sz + px

_font-size: $sz / 10 * 1rem

_

div

_+fs(9)

 

ファイルの拡張子

『SCSS』で記述した『Sass』は、ファイルの拡張子を『.scss』にする必要があります。

それに対して、

『SASS』の場合は、拡張子は『.sass』です。

つまり、1つのファイルの中で、両方の構文を混用することはできません。

 

『SCSS』と『SASS』の使い分け方

ノートパソコンとクッキー

『SCSS』と『SASS』は、どのように使い分ければいいでしょうか?

まず、

『SCSS』と『SASS』を混用しなければならない場面はありません。

ですから、どちらか好きなほうを使えばいいことになりますね。

もし、あなたがC言語などに慣れているのなら、『SCSS』のほうが使いやすいでしょう。

また、

あなたがPythonを主に使っているなら、『SASS』のほうが記述しやすいと感じるはずです。

 

もともと、『Sass』には『SASS』のほうしか記述できませんでした。

『SCSS』は、後で追加された新しい構文です。

おそらく、C言語に似せた文法の採用についても要望があったのでしょう。

 

はなこ
自分の使いやすい方を選べばいいのね。

私はPythonに慣れているから、シンプルに記述できる『SASS』のほうかな。

僕は、C言語に慣れているから、『SCSS』のほうがいいな。
たろう

スポンサーリンク

まとめ

今回の違いのポイントについて、まとめていきましょう。

ポイント

  • 『SCSS』は、C言語などと同じように波括弧でブロックを表し、『SASS』はPythonと同じようにインデントでブロックを表す
  • mixinの記法は、『SCSS』が@mixin/@includeで、『SASS』が=/+である。
  • 『SCSS』のファイルの拡張子は『.scss』で、『SASS』のファイルの拡張子は『.sass』である。

『SCSS』『SASS』のどちらを使っても、CSSよりは簡単にスタイルシートを記述することができます。

ぜひ、上手に活用してください。

関連記事

-ITの違い

Copyright © 違いを解説君 , All Rights Reserved.