SASS 導入方法やSCSS記法の基本的な書き方

本記事は広告が含まれる場合があります CSS

【Sass入門】導入方法やSCSS記法の基本的な書き方

今回はSassの概要とともに、Visual Studio Codeを使ったSassの導入方法をはじめ、SCSS記法の基本的な書き方をいくつか紹介します。

Sassを利用するとCSSの記述量を減らせたり、管理が楽になりますので、CSSをある程度覚えたらSassも一度勉強してみてください。
 

 

 

Sassとは?使用するメリット

Sassの概要と特徴

Sassの公式サイト

Sassは「Syntactically Awesome Style Sheets(和訳: 構文的に優れたスタイル シート)」の略で、CSSをより効率的に書けるように機能拡張された言語のことを言います。

小規模のホームページ制作では通常のCSSで書いていても手間を感じないかもしれませんが、規模が大きくなるとコード量が増えて煩雑になりがちです。

Sassを利用すれば、コードの記述量を減らすことができ、1つのセレクターに対しての記述を一箇所にまとめることができるので、CSSの管理・メンテナンスが楽になります。

■Sassの特徴

  • ネスト(入れ子)構造が使えるので、1つのセレクターに対しての記述をまとめられる
  • 変数が使える
  • 四則演算(+、−、×、÷)が使える
  • 定義したCSSスタイルを他のところで簡単に呼び出せる
  • 条件処理や関数が使用できる
  • スタイルシートを分割できる

 

Sassの2つの記法:SCSSとSASS

Sassには2つの書き方があり、SCSS記法とSASS記法があります。一般的にはSASSよりもSCSSの方が主流とされており、ここでもSCSS記法の書き方を紹介していきます。

■SCSS記法とSASS記法(SCSS記法の方が一般的)

SCSS記法 SASS記法
特徴
  • 拡張子には「.scss」を使用する
  • ネストの表現には{}(波括弧)を利用する
  • プロパティの終わりに;(セミコロン)が必要
  • 通常のCSSをそのまま書くことができる
  • 拡張子には「.sass」を使用する
  • ネストの表現にはインデントを利用する
  • プロパティの終わりに;(セミコロン)を書かない
  • 通常のCSSをそのまま書くことができない

 

SCSS記法では、こちらは通常のCSSと同様、ネスト表現に{}を使用したり、CSSをそのまま書くことができたりするといった理由から、多くのユーザーに使用されています。

■SCSS記法の特徴

  • 拡張子には「.scss」を使用する
  • ネストの表現には{}(波括弧)を利用する
  • プロパティの終わりに;(セミコロン)が必要
  • 通常のCSSをそのまま書くことができる

■SCSS記法の記述例

 

(参考)SASS記法

一方、SASS記法は、通常のCSSをそのまま書くことができなかったりするため、SCSS記法ほどは普及されていません。
■SASS記法の記述例

 
 

Sassを導入する方法

それではここからはSassを導入する方法を紹介していきます。

今回は、テキストエディター「Visual Studio Code(以下、VS Codeと呼ぶ)」の拡張機能「Live Sass Compiler(by Glenn Marks)」を使って、Sassを導入する方法を紹介していきます。

Live Sass Compiler(by Glenn Marks)

VS Codeを使ったことがない方は「【VSCode】Visual Studio Codeのインストール・設定手順」の記事を参考に、VS Codeをインストールしてみてください。
 

■Live Sass Compiler(by Glenn Marks)を使ってSassを導入する手順

  • STEP. 1:Live Sass Complier(by Glenn Marks)をインストールする
  • STEP. 2:ファイルを作成し、拡張子を「.scss」とする
  • STEP. 3:「Watch Sass」をクリックする

 

STEP. 1:Live Sass Complier(by Glenn Marks)をインストールする

STEP. 1ではまず、「Live Sass Complier(by Glenn Marks)」をインストールしましょう。

VS Codeの拡張機能追加メニューで「Live Sass Compiler」と検索し、出てきたこちらを「インストール」します。

「Live Sass Compiler」と検索し、出てきた拡張機能の上で「インストール」をクリック

インストールが完了したら、VS Codeの右下に「Watch Sass」という文言が表示されているのが確認できるはずです。

インストールが完了したら、VS Codeの右下に「Watch Sass」という文言が表示される

 

STEP. 2:ファイルを作成し、拡張子を「.scss」とする

次にファイルを作成し、拡張子を「.scss」としましょう。新しいテキストファイルを追加するには「ファイル」→「新しいテキストファイル」をクリックします。

「ファイル」→「新しいテキストファイル」をクリック

新しいテキストファイルが追加されたら、次に「ファイル」→「名前を付けて保存」をクリックします。

「ファイル」→「名前を付けて保存」をクリック

ここで名前を「style.scss」に変更し、「保存」をクリックします。

ファイル名を「style.scss」に変更し、「保存」をクリック

これでSCSS記法が使えるSassファイルの作成ができました。

 

STEP. 3:「Watch Sass」をクリックする

ここまででファイルの準備ができたら、最後に「Watch Sass」をクリックし、コンパイルの監視を開始しましょう。

VS Codeの右下を見ると「Watch Sass」と書かれた箇所があるので、こちらをクリックします。

「Watch Sass」をクリック
 

.scssファイルを保存をすると「.scss」ファイルと同じディレクトリ内にコンパイル結果のCSSファイルが生成されるようになります。

試しに、以下のコードを「.scss」ファイル内に貼り付けて「Cntl+S(Macの場合はCommand+S )」で上書き保存をしてみましょう。

「.scss」ファイルにコードを貼り付けて保存する

「style.scss」ファイルを保存すると、以下のように「style.css」ファイルと「style.css.map」ファイルが生成されたはずです。

なお実際に使用するのは「style.css」の方なので「style.css.map」ファイルは必要ありませんが、こちらの「.map」ファイルはブラウザのデベロッパーツールを開いてデバッグする際「元のscssファイルの何行目の設定なのか」ということを確認するのに使用されます。

「.map」ファイルはCSSとScssファイルを結びつける役割を持っている

 

scssファイルはcssファイルにコンパイル(変換)が必要

ここでは、scssファイルを「Watch Sass」をクリックしてcssファイルに変換しました。

HTMLファイルからscssファイルをcssとして直接読み込むことはできないので、結局はcssファイルに変換(コンパイル)してあげる必要があります。

SCSS、SASS記法のファイルをCSSファイルにコンパイルしてから読み込む

コンパイルの方法は他にもいくつもありますが、今回は、簡単にできるVS Codeの拡張機能を使用して実施しました。

 
 

SCSS記法の基本的な書き方

ここからは、SCSS記法の基本的な書き方をいくつか紹介します。

■SCSS記法の基本的な書き方

  1. 入れ子にする
  2. &を使って親セレクタを参照する
  3. メディアクエリを使う
  4. 変数を使う
  5. 定義したCSSスタイルを他のところで呼び出す
  6. 制御構文(@if、@for、@while、@each)を使う

 

1. 入れ子にする

CSSで以下のように同じセレクターを使いたい場合があると思います。

 

このような場合、Sassを使うと以下のように入れ子(ネスト)構造にして記述すればOKです。

こうすることで記述量が減り、かつHTML構造も見やすくなったと思います。また、クラス名を変更したい場合、Sassを使用している場合であれば1つのクラス名のみを変更すれば良いので、この点もメリットと言えます。

 

2. &を使って親セレクタを参照する

ホバーや擬似要素before、afterなどを使用したい場合、Sassでは&(アンパサンド)を使用します。

 

&(アンパサンド)を使うとネストしている親セレクタを参照することができるので、上の記述のコンパイル結果は以下のようになります。

 
また、複数のクラス名を繋げて記述することで適用範囲を絞り込みたい場合なども「&」が使用できます。

 
こうすることで、クラス名に「test」と「sample」の両方がある要素のみにスタイルを適用させることが可能です。

 

3. メディアクエリを使う

Sassでメディアクエリの指定をしたい場合は、ネスト内に以下のように記述します。

 

こうすることで、1つの要素に対する全てのスタイルを一箇所にまとめることができるので、よりコードのメンテナンスがしやすくなります。

 

4. 変数を使う

Sassで変数を使用したい場合は、「$変数名: ;」で変数宣言をしてから、呼び出したい箇所で「$変数名」と指定すればOKです。

 

これで保存すると、コンパイル結果は以下のようになります。

 

5. 定義したCSSスタイルを他のところで呼び出す

Sassを使うとあらかじめCSSスタイルを定義しておいて、他の箇所で呼び出すことが可能です。

なお、CSSスタイルを定義したい場合は@mixin、定義したスタイルを呼び出したい場合は@includeを利用します。

CSSスタイルを定義したい場合は@mixin、定義したスタイルを呼び出したい場合は@includeを利用する
 

 

これでコンパイル結果を見てみると、以下のように表示されているはずです。

 

6. 制御構文(@if、@for、@while、@each)を使う

Sassを使うと制御構文(@if、@for、@while、@each)を使用することができます。

JavaScriptやPHPなどでプログラムを書いたことがある人はお馴染みの内容で、たとえば、条件分岐をしたり、繰り返し処理などが該当します。

逆にifやforなどを初めて見る人には少し難しいかもしれませんので、余力があれば参考にしてみてください。

 

@ifを使って条件分岐をする

@if文を使うと、条件分岐を分岐させ、条件を満たす場合のみ指定したプロパティを適用することが可能です。

なお、最も基本的な@ifの条件分岐の書き方は以下の通りです。

最も基本的な@ifの書き方

上の例では、条件を満たしているため、コンパイル結果は以下のようになります。

なお、条件を満たさなかった場合の処理を追加することもでき、その場合は@ifの後に@else{}と記述すればOK。

さらに、@else ifを追加することで、@ifで定義している条件を満たさなかった場合の新しい条件を追加することも可能です。

 

@forを使って開始値から終了値までの間は繰り返し処理を行う

@forを使うと、指定した開始値から終了値の間は繰り返し処理を行うことができます。

なお@forには以下の2つの書き方がありますが、「through」は終了値を含めるのに対して、「to」は含めない点が異なります。

@for文の2種類の書き方

これで、開始値「1」から終了値「4」の間は繰り返し処理が行われて、コンパイル結果は以下のようになります。

 

@whileを使って条件を満たしている間は繰り返し処理を行う

@whileは@forと似ていますが、@whileを使うと条件を定義し、その条件を満たしている間は繰り返し処理を行うことができます。

@whileを使って条件を満たしている間は繰り返し処理を行う書き方

これで$iが4未満の間は、@while{}の中に書かれた処理が繰り返されるようになります。

 

@eachを使ってリストの数だけ繰り返し処理を行う

@eachを使うと、あらかじめ指定しておいたリストの数だけ繰り返し処理を行うことができます。

@eachを使ってリストの数だけ繰り返し処理を行う書き方

上の例ではクラス名と画像URL内にリストの値を使用してあげることで、クラス名ごとに異なる背景画像を指定しています。

 

(補足)Dart Sass

補足ですが、実はSassも時期によっていくつか種類が生まれています。

現在推奨されているSassは、「Dart Sass」と呼ばれ、以前よく使われていた「@import」が廃止され、「@use」「@fowerd」を使われるようになったなど若干書き方が変わっています。

Dart Sass Dartによる実装。現在推奨されているSass。
LibSass C/C++による実装。2020年10月以降、非推奨。
Ruby Sass RubyによるSassの最初の実装。2019年3月にサポートが終了、現在非推奨。

 
 

まとめ・Sassの導入方法や書き方について

まとめです。今回はSassの概要や導入方法をはじめ、SCSS記法の基本的な書き方をいくつか紹介しました。

ここでは、基本的な使い方の紹介のみをしていますが、ほかにも関数が使えたりなど多くの機能や、便利な使い方・書き方があります。

そのため、まずはここで紹介した内容を覚えて、慣れてきたら他の機能も調べながら使っていってみてください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

-CSS