当たり前のように、scssを使うようになってきた現代です。
しかし、cssとscss(sass)の違いが意外と分からない方もいるので、scss(sass)についてとメリットをまとめたので、cssと比較してわかってもらいたいと思っています。
scss(sass)とは
scss(sass)とは、「Syntactically Awesome StyleSheet」を略してもので、直訳すると
- Syntactically : 構文的に
- Awesome : 驚くばかり
- StyleSheet : スタイルシート
という意味になります。
簡単に言うと、「cssよりも効果的に書くことができる言語」ということです。
scssとsassの違いは、記述方法が異なること以外、特に違いはないです。
- 記述方法が異なる
- 拡張子が異なる
両者の違いをまとめると、上記のようになります。
scssとsassの記述方法です。
scssの記述
.text{
font-size: 20px;
a{
color: #ffffff:
}
}sassの記述
.text
font-size: 20px
a
color: #ffffff両者を見比べてわかるように、sassではセミコロンやカッコを使用していません。慣れている方でないと少し分かりにくいと思います。
cssとscss(sass)の違い（メリット）
入れ子にできる
CSSで書く場合に、CSSだと毎回頭にIDやクラス名と付ける必要があります。sassであれば入れ子（ネスト）で書き自動付与することができます。
cssの場合
.text{
font-size: 20px;
}
.text a{
color: #ffffff:
}↓
scssの場合
.text{
font-size: 20px;
a{
color: #ffffff:
}
}変数を使って共通の値を使い回せる
WEBサイト内で「共通の色」を使う場合、通常のCSSではその都度「色指定」をする必要があります。
しかし、sassの場合「変数」を使うことで、「共通の値を変数」として指定することができます。
この「変数」の何が良いかと言うと、例えば「変数」を使った共通の色に対して、色を変えてほしいという修正指示があった場合、変数の元の色を１箇所修正するだけで、変数を指定した「全ての箇所を一気に変更」できるというメリットがあります。
cssの場合
#test{
background-color: #55acee;
}
#box {
background-color: #55acee;
}↓
scssの場合
$background-color: #55acee;
#test{
background-color: $background-color;
}
#box {
background-color: $background-color;
}擬似要素の書き方が簡単
私が初めて使ったときsassは、擬似要素を指定する場合に&を使用するのでとても簡単だと思いました。
下記のように、scssのほうが見やすく、わかりやすいと思います。
cssの場合
a{
background: #939393;
}
a:hover {
background: #939393:
opacity:0.7;
}↓
scssの場合
a{
background: #939393;
&:hover {
background: #939393:
opacity:0.7;
}関数の使用ができる
関数とは、定められた一連の処理（機能）を定義して名前を付けたもので、その関数を呼び出すことで一連の処理が実行される仕組みになっています。
例えば、下記のように予め用意されている、lighten関数を使用して黒色が30%明るくなった色#4d4d4dが出力することができます。
//コンパイル前（SCSS）
.item-box {
color: lighten(#000000, 30%);
}
//コンパイル後（CSS）
.item-box {
color: #4d4d4d;
}他にも、複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができる機能が、用意されているので調べてみて下さい。
予め用意されている関数だけでも便利ですが、自分で作成する関数である自作関数を使うことができます。
自作関数では、作成する際は@functionで定義し@returnで返す値を示します。
例にpxをvw単位に変換する方法で説明します。
font-sizeなどでpxをvwに変換し、画面幅の縮小に合わせて文字も自然に小さくすることが合ったと思います。
私も、自社のサイトを使い毎回変換していました。「一括pxからvw計算機」
しかし、scssでは下記のように作成すれば勝手にvwに変換してくれます。
scssファイルに以下の入力が必要です。
$baseWidth : 375; /* 「$baseWidth」の数値はデザインカンプの幅によって変更します。 */
@function vw($pixelsVw) {
@return $pixelsVw / $baseWidth * 100vw;
}上記でデザインカンプの幅が375pxに作られているとき、ある要素のfont-sizeが25pxだったとき以下のように記述します。
p {
font-size: vw(25);
}cssでは、font-sizeが6.667vwとなり375pxで見たときに、ちょうど25pxになっています。
ループ処理を使える
「@for、@each、@while」の３つを使いこなすと「ループ処理（繰り返し）」を行うことができます。
これは何か決まった処理を繰り返し行うことを命令するというものです。sassを使えば、ループ処理によって同じようなCSSを繰り返し記述する手間を省くことができます。
@for
一定の区間を繰り返させたいときに使います。
記述
@for 変数 from 開始の値 through 終了の値 {
//変数が開始の値〜終了の値の間、処理が繰り返されます
}@for 変数 from 開始の値 to 終了の値 {
//変数が開始の値〜終了前まで、処理が繰り返されます
}@forは2パターンあり、違いは「through」と「to」の違いです。
「through」は最後の要素まで効きます。
「to」は最後の要素には効きません。
@each
中身を繰り返したいときに使用します。
記述
@each リストの要素の変数 in リストの変数{
//リストの要素のそれぞれに処理が繰り返されます
}@while
一定の条件の元で繰り返させたいときに使います。
記述
@while 条件式 {
//条件を満たしている間この部分の処理が繰り返されます
}上記に従って、記述すると以下のように作り上げることが出来ます。
See the Pen scss-route by Jun Yamagami (@Jun-Yamagami) on CodePen.
まとめ
私は、sassのほうが分かりやすく使いやすいと感じています。
sassを使っている方がたくさんいるので、今後sassは当たり前になってくると思います。
cssより効率よく作業ができるので、書き方を覚て習得すると便利です。
上記以外にもcssよりsassの方が便利なことがたくさんあります。試してみて下さい。
