最近の猫田さんはTwitterで情報を収集することが多いようです。
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
んー まーた知らない用語が出てきたなぁ
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
なにか新しい情報でもありましたか?
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
SASSとSCSSというものがあるらしい。 そして、それはとても便利らしい
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
それだけだと、謎解きのような……雲を掴むような話にしか聞こえませんねぇ
そんな話をしている二人の元にキャニット先生がやってきました。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
SASSやSCSSの話をしているとは……二人とも頑張っているようですね
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
名前を聞いただけだよ
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
あら、そうでしたか(笑)
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
ところでキャニット先生、そのSASSとSCSSはいったいなんなんですか?
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
では、せっかくなので今回はSASS とSCSSについて簡単に説明しましょうか。今すぐに学ぶのではなくても、こういうものもあると知っておくと良いでしょう
というわけで、今回はプログラミング初心者向けにSASSとSCSSの解説をします。
簡単にわかるSassの概要
![パソコン](https://www.canit.jp/wp-content/uploads/2021/07/4836918_s.jpg)
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
そもそも、SASSとは何かという話からしましょうか……
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
お願いします
SASSは、Sass(Syntactically Awesome Style Sheets)というRuby製のCSSメタ言語です。
Sassはハンプトン・キャトリン氏が設計、ネイサン・バイゼンバウム氏が開発したものとして知られています。SassはCSSを効率的に記述できるように設計・開発された言語であり、CSSでは長く複雑になってしまう記述もSassならシンプルに書けるのが特徴です。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
つまり、Sassを使えば大幅に作業を効率化でき、作業時間も短縮できます
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
すごいじゃん!
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
そう、すごいんです(笑)
SASSとSCSSとの違いは?
![学習する女性](https://www.canit.jp/wp-content/uploads/2021/05/4552741_s.jpg)
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
SassにはSCSSとSASSの2つがあるので、その違いを説明しますね
SCSSとSASSの違いは書き方であり、SCSSのほうが一般的には使用されています。そもそもSCSSは、SASSがCSSとの互換性が十分ではなかったため開発されたものであり、SCSSがスタンダードになっているのは当然の流れとも考えられます。SCSSはSCSS独自の書き方だけではなく、いつも通りのCSSも書けるのでより便利です。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
あと、SCSSとSASSは、拡張子も違うんですよ
SASS の記述例
margin: 0
padding: 0
li
margin: 0
a
display: block
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
このようにSASS はセミコロンやカッコを使用しないため、コード量が少なくなるのがメリットです
SCSS の記述例
margin: 0;
padding: 0;
li {
margin: 0;
a {
display: block;
}
}
}
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
一方、SCSS のメリットは記述方法がCSSに似ているのでわかりやすい点ですね。ネスト(入れ子)で書けるため、直感的にも分かりやすく、解説しているWebサイトも多いです。学びやすいのは、SCSSのほうでしょう
Sassを使う4つのメリット
![スマホ](https://www.canit.jp/wp-content/uploads/2021/05/174665_s.jpg)
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
Sassを使うメリットは結構大きいんですよ。代表的なものを紹介すれば、いかにSassが便利なのか二人にも伝わると思います
①:ネスト(入れ子構造)が利用できる
CSSとのもっとも大きな違いでもありますが、ネスト(入れ子構造)による記述が可能なため、記述量を減らすことができます。ネストにより記述がわかりやすくなるメリットもあるでしょう。また、一箇所に記述がまとまるので、CSSよりも見落としが少なくなります。
②:条件処理や関数が使える
条件分岐や繰り返しなどの制御が可能です。そのため、少ない量のコード記述でも連続した処理など、色々なことができます。
③:変数が使える
変数は繰り返し使うカラーコードなどを定義すれば、何度でも簡単に利用できる機能です。変数を使えば、修正が生じても最小限の修正量で作業が済みます。変更がよく生じるところや何度も記述しなければいけない部分に利用するととても便利です。
④:Webで情報収集が容易
Sassは、上記でも説明した通り作業を効率化できたりと、とても便利な言語なため、利用者が多いです。そのため、分からないことがあってもすぐにWeb上で情報を収集することができます。
Sassの学習方法
![パソコン ふくろう](https://www.canit.jp/wp-content/uploads/2020/12/owl-947741_640.jpg)
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
CSSと比べると、あまり身近ではない気がするのですが……
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
そうそう! 身近じゃないから、どうやって勉強すればいいのかよくわからないよね
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
最近はそうでもないですよ。安価でSassを学ぶ方法もあります。たとえば、書籍や動画ですね
①:書籍でのSass学習方法
![sass](https://www.canit.jp/wp-content/uploads/2021/07/7aa5181e74ffdf107b53ae9c8b534667.jpg)
「Web制作者のためのSassの教科書」という本がおすすめです。Sassの導入から詳しい使い方・テクニックが詳しく載っています。主にSassにまったく触れたことがない方を対象としているので、Sassの機能だけでなく、Sassの概要から利用環境の整え方まで丁寧に解説しています。
②:動画でのSass学習方法
プログラミングのオンライン学習サイトで有名なProgate(有料版)でもSassを学べます。ただ、講義自体は1レッスンしかなく基本的な部分の使い方に触れているだけなので、この動画だけでSassを学ぶのは無理です。最初にProgateの動画を見て、Sassの全貌が掴んでおく。そんな使い方が良いと思います。
初心者向けSASS講座:まとめ
![パソコン](https://www.canit.jp/wp-content/uploads/2021/04/4015917_s-1.jpg)
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
以上、簡単にですけど、今回はSassの説明をしましたよ
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
便利なようですから、今後は今以上にメジャーになるかもしれませんね
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
CSSの延長だとは、なんとなくわかりました
コードの記述が少なく作業的な負担の削減と管理上の利便性の高さは、ホームページの制作時から運用にわたるまで長くメリットを生むことになります。スタンダードに利用されているSCSSを使えば、CSSも記述可能なので、SCSSへのシフトにあたっての負荷もあまりないでしょう。CSSに慣れてきたら、是非SASSやSCSSにも触れてみてください。