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

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

Sassを利用するとCSSの記述量を減らせたり、管理が楽になりますので、CSSをある程度覚えたら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記法の記述例

$main-color: aqua;

.oya {
  width: 300px;
  background-color: $main-color;
  padding: 30px;
  box-sizing: border-box;
  
  .ko{
    width: 100%;
    height: 100px;
    background-color: #fff;
  }

  p{
    text-align: center;
  }
}

$main-color: aqua;

.oya {

width: 300px;

background-color: $main-color;

padding: 30px;

box-sizing: border-box;

.ko{

width: 100%;

height: 100px;

background-color: #fff;

}

text-align: center;

}

(参考)SASS記法

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

$main-color: aqua

.oya 
  width: 300px
  background-color: $main-color
  padding: 30px
  box-sizing: border-box

  .ko
    width: 100%
    height: 100px
    background-color: #fff

  p
    text-align: center

$main-color: aqua

.oya

width: 300px

background-color: $main-color

padding: 30px

box-sizing: border-box

.ko

width: 100%

height: 100px

background-color: #fff

text-align: center

Sassを導入する方法

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

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

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」と検索し、出てきたこちらを「インストール」します。

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

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

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

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

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

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

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

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

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

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

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

.test{
  text-align: center;

  p{
    font-size: 20px;
  }
}

.test{

text-align: center;

font-size: 20px;

}

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

.test {
  text-align: center;
}
.test p {
  font-size: 20px;
}/*# sourceMappingURL=style.css.map */

.test {

text-align: center;

}

.test p {

font-size: 20px;

}/*# sourceMappingURL=style.css.map */

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

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

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

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

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

SCSS記法の基本的な書き方

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

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

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

1. 入れ子にする

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

.header {
  /* スタイル記述 */
}
.header nav {
  /* スタイル記述 */
}
.header ul {
  /* スタイル記述 */
}
.header ul li {
  /* スタイル記述 */
}

.header {

/* スタイル記述 */

}

.header nav {

/* スタイル記述 */

}

.header ul {

/* スタイル記述 */

}

.header ul li {

/* スタイル記述 */

}

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

.header {
  /* スタイル記述 */
  nav {
     /* スタイル記述 */
  }
  ul {
      /* スタイル記述 */
      li {
         /* スタイル記述 */
      }
  }
}

.header {

/* スタイル記述 */

nav {

/* スタイル記述 */

}

ul {

/* スタイル記述 */

li {

/* スタイル記述 */

}

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

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

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

a{
  text-decoration: none;
  color: #333;
  &:hover{
    text-decoration: underline;
  }
}

text-decoration: none;

color: #333;

&:hover{

text-decoration: underline;

}

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

a {
  text-decoration: none;
  color: #333;
}
a:hover {
  text-decoration: underline;
}

a {

text-decoration: none;

color: #333;

}

a:hover {

text-decoration: underline;

}

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

.test{
  /* スタイル記述 */
  &.sample{
    /* スタイル記述 */
  }
}

.test{

/* スタイル記述 */

&.sample{

/* スタイル記述 */

}

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

.test {
  /* スタイル記述 */
}
.test.sample {
  /* スタイル記述 */
}

.test {

/* スタイル記述 */

}

.test.sample {

/* スタイル記述 */

}

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

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

.test{
  /* スタイル記述 */
  @media screen and (max-width: 1024px) {
    /* スタイル記述 */
  }
}

.test{

/* スタイル記述 */

@media screen and (max-width: 1024px) {

/* スタイル記述 */

}

.test {
  /* スタイル記述 */
}
@media screen and (max-width: 1024px) {
  .test {
    /* スタイル記述 */
  }
}

.test {

/* スタイル記述 */

}

@media screen and (max-width: 1024px) {

.test {

/* スタイル記述 */

}

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

4. 変数を使う

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

$main-color: blue;

.test{
  background-color: $main-color;
}

$main-color: blue;

.test{

background-color: $main-color;

}

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

.test {
  background-color: blue;
}

.test {

background-color: blue;

}

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

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

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

/* あらかじめスタイルを定義 */
@mixin box1 {
  border: 1px solid #333;
  padding: 20px;
  background-color: #eee;
}
 
.test {
  /* スタイルの呼び出し */
  @include box1;
  /* 新たなスタイルの追加 */
  color: #333;
}

/* あらかじめスタイルを定義 */

@mixin box1 {

border: 1px solid #333;

padding: 20px;

background-color: #eee;

}

.test {

/* スタイルの呼び出し */

@include box1;

/* 新たなスタイルの追加 */

color: #333;

}

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

.test {
  /* スタイルの呼び出し */
  border: 1px solid #333;
  padding: 20px;
  background-color: #eee;
  /* 新たなスタイルの追加 */
  color: #333;
}

.test {

/* スタイルの呼び出し */

border: 1px solid #333;

padding: 20px;

background-color: #eee;

/* 新たなスタイルの追加 */

color: #333;

}

6. 制御構文（@if、@for、@while、@each）を使う

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

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

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

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

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

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

$sample: 0;
.box{
  @if $sample == 0{
    background-color: blue;
  }
}

$sample: 0;

.box{

@if $sample == 0{

background-color: blue;

}

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

.box {
  background-color: blue;
}

.box {

background-color: blue;

}

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

$sample: 1;

.box {
  @if $sample==0 {
    background-color: blue;
  }
  @else {
    background-color: red;
  }
}

$sample: 1;

.box {

@if $sample==0 {

background-color: blue;

}

@else {

background-color: red;

}

.box {
  background-color: red;
}

.box {

background-color: red;

}

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

$sample: 1;

.box {
  @if $sample==0 {
    background-color: blue;
  }

  @else if $sample==1 {
    background-color: yellow;
  }

  @else {
    background-color: red;
  }
}

$sample: 1;

.box {

@if $sample==0 {

background-color: blue;

}

@else if $sample==1 {

background-color: yellow;

}

@else {

background-color: red;

}

.box {
  background-color: yellow;
}

.box {

background-color: yellow;

}

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

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

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

@for $i from 1 through 4 {
  .mt#{$i * 20} { // 文字列として$iを使いたい場合は「#{$i}」と記述する
    margin-top: 20px * $i;
  }
}

@for $i from 1 through 4 {

.mt#{$i * 20} { // 文字列として$iを使いたい場合は「#{$i}」と記述する

margin-top: 20px * $i;

}

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

.mt20 {
  margin-top: 20px;
}

.mt40 {
  margin-top: 40px;
}

.mt60 {
  margin-top: 60px;
}

.mt80 {
  margin-top: 80px;
}

.mt20 {

margin-top: 20px;

}

.mt40 {

margin-top: 40px;

}

.mt60 {

margin-top: 60px;

}

.mt80 {

margin-top: 80px;

}

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

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

$i:0;
@while $i < 4 {
  $i: $i + 1;
  .mt#{$i * 20} { // 文字列として$iを使いたい場合は「#{$i}」と記述する
    margin-top: 20px * $i;
  }
}

$i:0;

@while $i < 4 {

$i: $i + 1;

.mt#{$i * 20} { // 文字列として$iを使いたい場合は「#{$i}」と記述する

margin-top: 20px * $i;

}

.mt20 {
  margin-top: 20px;
}

.mt40 {
  margin-top: 40px;
}

.mt60 {
  margin-top: 60px;
}

.mt80 {
  margin-top: 80px;
}

.mt20 {

margin-top: 20px;

}

.mt40 {

margin-top: 40px;

}

.mt60 {

margin-top: 60px;

}

.mt80 {

margin-top: 80px;

}

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

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

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

$animals: cat, lion, tiger;
@each $animal in $animals {
  .#{$animal} {
    background-image: url('/img/#{$animal}.png');
  }
}

$animals: cat, lion, tiger;

@each $animal in $animals {

.#{$animal} {

}

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

.cat {
  background-image: url("/img/cat.png");
}

.lion {
  background-image: url("/img/lion.png");
}

.tiger {
  background-image: url("/img/tiger.png");
}

.cat {

}

.lion {

}

.tiger {

}

（補足）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チャンネル開設しました！

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

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

YouTubeチャンネルはこちら

YouTubeチャンネル

個別指導Webスクール

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

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

Sassの概要と特徴

Sassの2つの記法：SCSSとSASS

Sassを導入する方法

STEP. 1：Live Sass Complier（by Glenn Marks）をインストールする

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

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

SCSS記法の基本的な書き方

1. 入れ子にする

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

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

4. 変数を使う

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

6. 制御構文（@if、@for、@while、@each）を使う

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

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

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

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

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

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

検索して記事を見つける

【初心者向け】CSSセレクタの種類や指定方法を徹底解説

【構造化データとは？】メリットやタイプ・基本的な書き方を解説

【HTMLセマンティック要素とは】意味付けされた要素・意味と使い方

HTML改行タグbrの使い方・文中に改行を入れる方法

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

WEBST8のコードブログ