初心者向け:SASSを学ぶメリットをわかりやすく紹介

パソコン プログラマーになる準備

最近の猫田さんはTwitterで情報を収集することが多いようです。

猫田さん
猫田さん

んー まーた知らない用語が出てきたなぁ

牛山くん
牛山くん

なにか新しい情報でもありましたか?

猫田さん
猫田さん

SASSとSCSSというものがあるらしい。 そして、それはとても便利らしい

牛山くん
牛山くん

それだけだと、謎解きのような……雲を掴むような話にしか聞こえませんねぇ

そんな話をしている二人の元にキャニット先生がやってきました。

CANIT先生
CANIT先生

SASSやSCSSの話をしているとは……二人とも頑張っているようですね

猫田さん
猫田さん

名前を聞いただけだよ

CANIT先生
CANIT先生

あら、そうでしたか(笑)

牛山くん
牛山くん

ところでキャニット先生、そのSASSとSCSSはいったいなんなんですか?

CANIT先生
CANIT先生

では、せっかくなので今回はSASS とSCSSについて簡単に説明しましょうか。今すぐに学ぶのではなくても、こういうものもあると知っておくと良いでしょう

 

というわけで、今回はプログラミング初心者向けにSASSとSCSSの解説をします。

簡単にわかるSassの概要

パソコン
CANIT先生
CANIT先生

そもそも、SASSとは何かという話からしましょうか……

牛山くん
牛山くん

お願いします

SASSは、Sass(Syntactically Awesome Style Sheets)というRuby製のCSSメタ言語です。

Sassはハンプトン・キャトリン氏が設計、ネイサン・バイゼンバウム氏が開発したものとして知られています。SassはCSSを効率的に記述できるように設計・開発された言語であり、CSSでは長く複雑になってしまう記述もSassならシンプルに書けるのが特徴です。

CANIT先生
CANIT先生

つまり、Sassを使えば大幅に作業を効率化でき、作業時間も短縮できます

猫田さん
猫田さん

すごいじゃん!

CANIT先生
CANIT先生

そう、すごいんです(笑)

SASSとSCSSとの違いは?

学習する女性
CANIT先生
CANIT先生

SassにはSCSSとSASSの2つがあるので、その違いを説明しますね

SCSSとSASSの違いは書き方であり、SCSSのほうが一般的には使用されています。そもそもSCSSは、SASSがCSSとの互換性が十分ではなかったため開発されたものであり、SCSSがスタンダードになっているのは当然の流れとも考えられます。SCSSはSCSS独自の書き方だけではなく、いつも通りのCSSも書けるのでより便利です。

CANIT先生
CANIT先生

あと、SCSSとSASSは、拡張子も違うんですよ

SCSSが「.scss」であることに対し、SASSは「.sass」です。大きなポイントは、SCSSではカッコ({ })を使い、入れ子構造を記述できるところです。

SASS の記述例

ul

    margin: 0

    padding: 0

    li

        margin: 0

        a

            display: block

CANIT先生
CANIT先生

このようにSASS はセミコロンやカッコを使用しないため、コード量が少なくなるのがメリットです

SCSS の記述例

ul {

    margin: 0;

    padding: 0;

    li {

        margin: 0;

        a {

            display: block;

        }

    }

}

CANIT先生
CANIT先生

一方、SCSS のメリットは記述方法がCSSに似ているのでわかりやすい点ですね。ネスト(入れ子)で書けるため、直感的にも分かりやすく、解説しているWebサイトも多いです。学びやすいのは、SCSSのほうでしょう

Sassを使う4つのメリット

スマホ
CANIT先生
CANIT先生

Sassを使うメリットは結構大きいんですよ。代表的なものを紹介すれば、いかにSassが便利なのか二人にも伝わると思います

①:ネスト(入れ子構造)が利用できる

CSSとのもっとも大きな違いでもありますが、ネスト(入れ子構造)による記述が可能なため、記述量を減らすことができます。ネストにより記述がわかりやすくなるメリットもあるでしょう。また、一箇所に記述がまとまるので、CSSよりも見落としが少なくなります

②:条件処理や関数が使える

条件分岐や繰り返しなどの制御が可能です。そのため、少ない量のコード記述でも連続した処理など、色々なことができます。

③:変数が使える

変数は繰り返し使うカラーコードなどを定義すれば、何度でも簡単に利用できる機能です。変数を使えば、修正が生じても最小限の修正量で作業が済みます。変更がよく生じるところや何度も記述しなければいけない部分に利用するととても便利です。

④:Webで情報収集が容易

Sassは、上記でも説明した通り作業を効率化できたりと、とても便利な言語なため、利用者が多いです。そのため、分からないことがあってもすぐにWeb上で情報を収集することができます。

Sassの学習方法

パソコン ふくろう
牛山くん
牛山くん

CSSと比べると、あまり身近ではない気がするのですが……

猫田さん
猫田さん

そうそう! 身近じゃないから、どうやって勉強すればいいのかよくわからないよね

CANIT先生
CANIT先生

最近はそうでもないですよ。安価でSassを学ぶ方法もあります。たとえば、書籍や動画ですね

①:書籍でのSass学習方法

sass

Web制作者のためのSassの教科書」という本がおすすめです。Sassの導入から詳しい使い方・テクニックが詳しく載っています。主にSassにまったく触れたことがない方を対象としているので、Sassの機能だけでなく、Sassの概要から利用環境の整え方まで丁寧に解説しています。

②:動画でのSass学習方法

プログラミングのオンライン学習サイトで有名なProgate(有料版)でもSassを学べます。ただ、講義自体は1レッスンしかなく基本的な部分の使い方に触れているだけなので、この動画だけでSassを学ぶのは無理です。最初にProgateの動画を見て、Sassの全貌が掴んでおく。そんな使い方が良いと思います。

初心者向けSASS講座:まとめ

パソコン
CANIT先生
CANIT先生

以上、簡単にですけど、今回はSassの説明をしましたよ

牛山くん
牛山くん

便利なようですから、今後は今以上にメジャーになるかもしれませんね

猫田さん
猫田さん

CSSの延長だとは、なんとなくわかりました

コードの記述が少なく作業的な負担の削減と管理上の利便性の高さは、ホームページの制作時から運用にわたるまで長くメリットを生むことになります。スタンダードに利用されているSCSSを使えば、CSSも記述可能なので、SCSSへのシフトにあたっての負荷もあまりないでしょう。CSSに慣れてきたら、是非SASSやSCSSにも触れてみてください。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
無料でスキルを学んでからIT業界に転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてIT業界に転職したいなぁ。でも、業界未経験だから、なんか敷居が高そう、と思っている方へ。

これからIT業界への転身を目指すあなたに、無料でスキルアップできて、平均で年収は90万円もアップできるんです。

プログラマーになる準備言語・WordPress
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

タイトルとURLをコピーしました