福岡の小さなアプリ開発会社のマガジン

Sassは初心者でもできる!Scssの基本的な書き方とは?

webの仕事に実際に携わっている人や、実案件でscssをメインに使用している人なら、Sassという言葉を耳にしたことがある人も多いのではないでしょうか。 しかし、WEB関連のお仕事に携わり始めた初心者の多くは、「Sassとは何?」「難しそう!」となるもの。なぜなら、コーディングはhtmlとcssで基本行うものなので、Sassを知らない人が多いからです。

そして、実案件でいきなり登場し扱いに戸惑ってしまうことも。そんなSassですが、マスターすることでコーディ ングがよりし易くなりますよ!ですので、是非、初心者の人こそSassをマスターすることをおすすめします。
今回は、そんなSassについて紹介していきます。初心者の人にも分かりやすくまとめていますので、是非参考にしてみてくださいね。

Sassとは?

Sassとは、「サス」と読みます。Sassは、CSSを効率的に記述することができるメタ言語になります。ここで「メタ言語って何?」と思う方もいるかと思いますが、 IT分野におけるプログラミングの語源と簡単に理解しておくと良いでしょう。このSassですが、「Syntactically=書き方」「Awesome=イケてる」「Style Sheets=スタイルシート」の略と一般的には言われています。
つまり、cssをより簡単に記述するものがScssになります。そして、このSassは「SCSS」と「SASS」という2つに分けられます。「どちらを使用したら良いの?」と思う方もいると思いますが、機能的にはどちらも同じです。2つを比較すると記述方法が異なるだけですので、自分に合った方を選ぶと良いですよ。ただ、初心者の方には「SCSS」がおすすめです。
なぜなら、「SCSS」 は、初心者の方でも馴染みのあるCSSの記述方法に似ているからです。そして、1度覚えると今まで以上にラクにCSSを記述することができますよ。私自身、 SCSSを使用してみて、その記述方法のし易さに目からウロコでした。それでは、次にこのSCSSのメリットを紹介していきますね。

SCSSのメリットは?

SCSSは、CSSをラクに記述することができるものということは述べてきましたが、実は他にもメリットがあります。まず、SCSSは入れ子で記述できるので、コードの量を削減し、コンテンツやパーツごとにスタイルが把握しやすいという面があります。そして、スタイルの値においても変数で管理できるので、変更や改修が格段にやり易く漏れなく作業を行うことが可能です。
SCSSのメリットを聞くと、なんだか SCSSを今すぐ使用してみたいという気持ちになってきますよね!それでは、早速SCSSの記述方法を紹介していきますね!

SCSSの記述方法はこれ!

SCSSには、入れ子(ネスト)や変数というものがあります。それでは、順に説明していきますね!

入れ子(ネスト)

入れ子とは、親セレクタの{ }の中に子セレクタの設置ができる記述方法になります。

例えば、下記のindex.htmlの場合を見ていきましょう。

このようなindex.htmlを作成した場合、Scssでの表示は以下のようになります。

このstyle.scssを見ると、親セレクタが子セレクタを{ }で包んでくれているということがお分かりいただけますでしょうか?そして、コンパイルすると下記のような表示になります。この「コンパイル」ですが、なんだか難しい用語のように感じるかもしれませんが、そのようなことはありません。
私たち人が作成するものを「ソースコード」と呼びます。そして、コンピューターが作成するものを「バイナリコード」と呼びます。この「ソースコード」から「バイナリコード」に変換することを「コンパイル」と呼びます。
つまり、「機械の言葉に変換しますよ!」ということです。このstyle.cssは、初心者の方も馴染みもある表示方法ではないでしょうか。つまり、cssより、もっと効率的に記述するScssを使用しコンパイルすることで簡単にcssを表示させることができるということになります。
そして、複数のクラスを指定する場合には先頭に「&」が必要です。

親セレクタを参照したい時に使用します。つまり、親セレクタと子セレクタの間にスペースを作らない場合は「&」を先頭に記述すると理解しておくと良いですよ!逆に、親セレクタと子セレクタの間に1つ分の半角スペースを作る場合には「&」は必要ないと頭の中に入れておくと分かりやすいです。

次に変数について、紹介していきますね!

変数

変数では「$」を使用します。サイト制作などで複数回使用する値は、変数として宣言しておくと大変便利です。そうすることで、作業の効率が大変上がります。また、見た目も分かりやすくなるのでメンテナンス性においてもしやすくなるので、初心者の人にもおすすめです。フォントサイズやカラーコード、ブレークポイント等で使用しましょう。
例えば、下記のScssの場合、main-color sub-color font-sizeを変数として宣言しています。

そして、コンパイルすることで下記のような馴染みのあるcssに変換されます。

初心者の人こそ使ってもらいたいSass!

今回は、Sassについて紹介してきましたが、いかがでしたか?cssが分かるのであれば、書いていくうちにSassの仕組みにも慣れていきます。とりあえず、まずはやってみましょう!
是非、Sassを使用して、仕事の能率をアップさせていってくださいね。今回紹介してきたことが、少しでもお役に立てれば幸いです。