はじめまして。デザイナー兼コーダーのかねまるです。
みなさんはコーディングをする際どんな記法でCSSを書きますか？
私は普段CSSをそのまま書いているのですが、今回CSSの拡張言語ことSassに挑戦してみました。

というのもきっかけはTwitterでこのようなアンケートを見かけたこと

CSSを書く人に質問。
Sassはどちらの記法をよく使いますか？
※Twitterのアンケート機能で回答ください

— 池田 泰延 / ICS (@clockmaker) May 9, 2020

結果は

・SASS 9.4%
・SCSS 71.8%
・他のプリプロセッサを使う 2.3%
・CSSは生で書く！ 16.4%

となりました

え？自分って2割にも満たない側の人間だったの？

弊社では基本的に生のcssでコーディングする人が多いためそんなに気にしていなかったのですが、
世の中ではSassで書くのが主流になりつつあるという・・・
そんな現実を目の当たりにし、流石の私もSassを勉強しなきゃやばいなと焦り始めました。

こうなったらそのSassとやらを使ってみようじゃないの！Let's Sass!

■はじめに

Sassってよくわからないな〜

「説明しよう！Sass(サス)とはCSS(シーエスエス)の拡張言語で変数や関数が使える記述法なんじゃ！」

誰？

「Sassが大好きサス博士じゃ。Sassのことならなんでも聞いてくれ。」

なるほど！Sassについてもっと詳しく教えてよ！

「いいじゃろう！Sassは今CSS記述法の主流になるほど便利なもので、上で言ったことに加え、変数や関数、四則演算、セレクタ指定の入れ子の使用、ミックスイン（複数のCSSのまとまりの再利用）など、CSSにはない機能を利用することができるぞ！」

「もっというとSassコンパイラでCSSファイルに変換することでWebブラウザの仕様に適応することができるんじゃ。初期のSassはCSSとは違った語彙や文法のSass記法と呼ばれる独自の記法を採用していたんじゃが、バージョン3.0からはCSSの拡張言語であるSCSS記法が新たに導入されたんじゃ。また、プログラミング言語部分はSassScriptとも呼ばれ算術演算や変数、及びその他の様々な追加機能を利用できるようにしているんじゃ。さらに・・・

もっというとSassコンパイラでCSSファイルに変換することでWebブラウザの仕様に適応することができるんじゃ。初期のSassはCSSとは違った語彙や文法のSass記法と呼ばれる独自の記法を採用していたんじゃが、バージョン3.0からはCSSの拡張言語であるSCSS記法が新たに導入されたんじゃ。また、プログラミング言語部分はSassScriptとも呼ばれ算術演算や変数、及びその他の様々な追加機能を利用できるようにしているんじゃ。さらに・・・

もっというとSassコンパイラでCSSファイルに変換することでWebブラウザの仕様に適応することができるんじゃ。初期のSassはCSSとは違った語彙や文法のSass記法と呼ばれる独自の記法を採用していたんじゃが、バージョン3.0からはCSSの拡張言語であるSCSS記法が新たに導入されたんじゃ。また、プログラミング言語部分はSassScriptとも呼ばれ算術演算や変数、及びその他の様々な追加機能を利用できるようにしているんじゃ。さらに・・・

早くも挫折しそうです。私のような数学嫌いのコーダー初心者にこんなのわかるわけがない。

「最初のうちはそんなに難しく考えなくて大丈夫じゃ！予備知識を全て入れようとするとパンクしてしまうからね。」

「さぁ！次に行ってみよう！」

■そもそもSassって名前がわかりにくい！

Sassのわかりにくいポイントでまず挙げられるのはその名前

図で表すとこういうこと

Sassがふたつあるやんけ！！

実はSass(サス)には二種類の記法があってひとつはSASS(エスエーエスエス)記法、もうひとつはSCSS(エスシーエスエス)記法があるのじゃ

今回学ぶのはSass(サス)のSCSS(エスシーエスエス)記法です。

「教材とか記事でSassでまとめられがちなんじゃが内容を見るとSCSS記法である場合が多いんじゃ」

ややこしいね・・・

※ちなみにSass(サス)とはSyntactically Awesome StyleSheetの略で、直訳すると「構文的に素晴らしいスタイルシート」となる

■けっきょく何が便利なの？

・フォトショップ、イラストレーターでいうところのパレット、XDでいうところのアセット機能やコンポーネントが使える

「つまりこれが変数やMixin（ミックスイン）と呼ばれる部分なんじゃ」

（変数Mixinについては次の記事で説明します）

はえ〜　すげーや

さらに

■ここが便利だSass！

・ベンダープレフィックスが自動でつく

ベンダープレフィックス・・・各ブラウザに示すために使われる識別子

・全部style.cssにまとまって気持ちがいい

・メディアクエリ設定しやすい

Sassってすげぇ！

■ここがダメだぜSass

・変数とかコンパイルとかCSSでは聞き慣れない言葉がたくさん出てきてややこしい

・使い始めるのに準備がいる（心の準備も）

「Sass始めようとしている人が遠ざけちゃう理由はここだね」

ですが、

CSSが使えれば100%Sass使えます！

CSS +便利機能
これがSass(SCSS)

「最初は無理に変数やコンパイルを使わずSassを使ってCSSの記述をして慣れてくのがSassへの一歩じゃ！」

すごいやサス博士！

ぼくSassを始めたくなったよ！

次回！Sass(SCSS)導入編 ––––––––––––––––––––

参考文献
IT用語辞典 e-Words Sass
enja-oss Sass -SassScript 日本語訳-