CSSって便利ですよね！
特にflexが便利で「え…？私のCSS、flex多すぎ…？」って心配になるくらい使ってしまいます。
ただ、サイ大きくなったりデザインが複雑になるほどファイルも重く、
コードを探すのも難解になりますよね。
そんなCSSの利便性を上げるべく、現在はsassやscssなどが使われることも多いです。
「よし、さっそく使ってみよう！」と思ってエディタツールを開いても、sass、scss、CSS、はたまたlessなんて言うのもあり、どれ使ったらいいかわからないと思います。
まず、それぞれの違いを知っていきましょう。
まずCSSについて
web上のデザイン・アニメーションを設定する際、なくてはならないものですね。
テキストのサイズ、レイアウトの構築、サイト内のカラーなど、webサイトの「装飾」をメインに担当してくれます。基本的な書き方は以下の通りです。
セレクタ{
プロパティ:値;
}
セレクタ …CSSで指定する対象で、htmlタグ、class名、id名で指定を行います。
プロパティ …CSSに関するスタイルの種類を決める部分です。
値 …プロパティを調整する部分です。
h1{
font-size:30px;
}
// 「h1」タグのテキストのテキストのサイズを30pxに設定する。
.main_contents{
width:100%;
}
// 「main_contents」というclass名をもつ要素のwidth（幅）を100%に設定する。
.main_contents p{
color:#ffffff
}
//「main_contents」の中にある「p」タグの色を「#ffffff」に設定する。
CSSはこれから説明する言語のベースになる存在ですので、初心者はここから始めるといいと思います。
sass・scssについて
次にsassとscss。名前はよく似ていますが、これらは「 Sass 」の記述方法のことを指しています。「 Sass 」とは、 CSSの拡張言語で、書きやすく、見やすくしたスタイルシート のことです。
例えば入れ子構造で例えるとそれぞれこのようにな書き方になります。
.main_contents {
width:100%;
}
.main_contents p {
font-size:16px;
line-height: 1.75
}
.main_contents p span {
font-size:14px;
color:#ffffff;
background-color:red;
}
.main_contents {
width:100%;
p {
font-size:16px;
line-height: 1.75;
span {
font-size:14px;
color:#ffffff;
background-color:red;
}
}
}
.main_contents
width:100%
p
font-size:16px
line-height: 1.75
span
font-size:14px
color:#ffffff
background-color:red
上記3つは「.main_contents」とその中の要素に対してcssが指定されています。
見比べてもらうと、記述量はcss > scss > sass となっていると思います。
sass / scssとは？
sass …ファイル拡張子は「.sass」で、セミコロンや波かっこを使用しないため、コード簡略化に特化している。
scss …ファイル拡張子は「.scss」で、CSSの記述方式に近いままコード簡略化ができる。
そのほかにもSassであればオリジナルの関数を作成したり、ミックスインという機能を使うことも可能です。
sass・scssを覚える利点
cssがあるんだったら、何個も言語覚える必要性ないのでは？と思うかもしれませんが、拡張言語といわれるようにSassにはCSSではできないことがあります。
記述量の減少
上記のコードを再度見てもらうとわかる通り、cssの場合は子要素にcssを反映したい場合、同じセレクタを何度も書く必要があります。でもSassの場合は一つのセレクタの中に入れ子構造を作っていけるので何度も同じ記述をしなくて済みます。（変数の書き方もCSSの時より記述量が減ります）
作業効率の上昇
上記のネスト構造の記述につながりますが、コーディングスピード向上や記述ミス回避につながります。何度も同じ記述を書くのってめんどう修正時に手間が増えますからね。
ミックスインの利用
ミックスインとは、定義したCSSのスタイルを別のところでも使えるようにする機能です。
サイト内のデザイン統一において重要な機能です。ページや機能に合わせてボタンの大きさや色を変えることもあるので、微妙な差を設定しやすいです。
Lessについて
あまり主流ではないかもしれませんが、実はLessというものも存在します。
こちらもSass同様にCSSの拡張言語で、拡張子は「.less」となります。
実はSassでできる入れ子やミックスインもLessで可能で、大きな違いとしては
Sass …Rubyがベースとなっている
Less …JavaScriptがベースとなっている（less.jsというものが必要です）
まとめ
sass …ファイル拡張子は「.sass」で、Rubyベースで動く。セミコロンや波かっこを使用しないため、コード簡略化に特化している。
scss …ファイル拡張子は「.scss」で、Rubyベースで動く。CSSの記述方式に近いままコード簡略化ができる。
less …ファイル拡張子は「.less」で、JavaScriptベースで動く。Sassで扱えるものは大体こちらでも使用可能。
参考:
https://udemy.benesse.co.jp/design/web-design/sass.html
https://shanabrian.com/web/sass/4arithmetic-operations.php