ウェブのましじめ

【書籍連載】第4回 Sassの基本

【連載】CSSコーディングバイブル本
田村 章吾(タムショー)

こんにちは。田村です。

このたびマイナビ出版さんから出版された『現場のプロから学ぶ CSSコーディングバイブル』を執筆いたしました。
このブログでは出版に合わせて、5回にわたりCSSとSassについて簡単に解説していきたいと思っています。

第1回から第3回までは、cssについて解説していきました。
今回からは2回に渡り、Sassについてを解説していこうと思っています。
4回目は、Sassの基本について解説していきます。

これまでの記事はこちら




絶賛発売中です!
ただいま、ご購入いただいた方に、特典PDFをプレゼントするキャンペーンを実施しますのでぜひともチェックしてみてください。


目次

● Sassとはなにか
● 2種類の記法
 記法の種類について
 SASS記法
 SCSS記法
● おわりに

Sassとはなにか

SassとはSyntactically Awesome StyleSheetの略であり、CSSプリプロセッサと呼ばれるものの一つでCSSを拡張して、書きやすく・見やすくしたスタイルシートのことです。

https://sass-lang.com/

CSSは基本的にシンプルで扱いやすいですが、プログラムのような演算やコードの再利用などの機能はありません。
しかし、現在のWeb制作ではレスポンシブウェブデザインへの対応やCSS設計を取り入れるなどCSSが複雑化しており純粋な CSSだけでは管理が難しくなっています。

例えば、同じ装飾を使い回したい場合は元のコードを重複して記述するしかなく、後で変更するにはすべて修正する必要があり、大変なうえ記述ミスや修正漏れが発生するかもしれません。

さらに、CSS に新しく便利な機能が追加されるとしても、CSSで扱えるようになるということはW3Cから勧告される必要があり、簡単に機能拡張することはできません。
さらに各ブラウザへの実装が普及を待たなければいけませんので実際に使用できるのはかなり先の話になってしまいます。

さまざまな環境に対応しなければならない


そこで、CSSにはまだ存在しない機能の仕様追加やブラウザの実装を待つのではなく、Sassのような便利な機能でCSSを拡張して管理し、Webサイトで使用する前に通常のCSSファイルに変換(コンパイル)することで複雑化したCSSを管理しやすくしています。

具体的には、.cssの拡張子であるCSSファイルではなく.sass、.scssなどの拡張子を使用したファイルにコードを記述します。

その後HTMLに読み込ませる前に、開発環境などで事前にCSSファイルにコンパイルして、読み込めるようになったファイルをサーバーにアップロードして使用します。

Sass ファイルだとブラウザで使用できないので CSS ファイルに変換して使用する

このように、Sassを使うとコンパイルする手間は増えますがその代わりCSSにない便利な機能を使えるようになります。

2種類の記法

記法の種類について

Sassには、SASS記法とSCSS記法の次の2種類の記法が存在します。


また、Sassの記述は、CSSファイルに書いても使用することはできず .sass、.scss などの拡張子を使用して記述する必要があります。


一般的に普及している記法はSCSS記法で、CSSと互換性があります。
互換性とはそのまま使えるか?ということで、SCSS記法は拡張子を .css から .scss へ変更することでSassファイルとして使用することができます。

ではなぜ2種類の記法が存在するのでしょうか。違いを見てみましょう。

SASS記法

まずSASS記法ですが、Sassと同じ名前をしていますね。
その名の通りSASS記法はSassの最初に作られた記法となります。
SASS記法の特徴として従来のCSSを簡素化して非常にシンプルにしたものでした。

  • 波括弧を使わずインデントで処理する
  • セミコロンの省略など記述を簡素化
  • 拡張子は .sass


 SASS

$color: #ccc
.title
 background-color: $color
 p
  font-size: 20px


コンパイルされるCSS

.title { 
 background-color: #ccc;
}
.title p {
 font-size: 20px; 
}



SASS記法では、従来のCSSと書き方が大きく変わっているため、互換性はなく既存のCSSファイルをそのままSass化することはできません。 さらに、インデントや改行など細かく書式が決まっており、慣れるまでに時間がかかってしまうということもあり広く普及しませんでした。

SCSS記法

その後、CSSと互換性のあるSCSS(Sassy CSS)記法が登場しました。
特徴としては SassをCSSと同じ感覚で記述することができます。

  • CSSと互換性があるので拡張子を変えるだけで使用できる
  • CSSを書くように書ける
  • 拡張子は .scss


SCSS

$color: #ccc;
.title {
 background-color: $color;
 p {
  color: $color;
  font-size: 20px; 
 }
}


コンパイルされるCSS

.title { 
 background-color: #ccc;
}
.title p {
 font-size: 20px;
}


SCSS記法はCSSと互換性があるため既存のCSSの拡張子を.scssとするだけでSassファイルになり、既存のプロジェクトにも簡単に使用することができます。

これにより既存のCSSファイルをSassファイル化してSassの機能を使いたい箇所のみ使用するなど、簡単に導入することが可能となり広く普及しました。 一般的にはSassといえば.scssを使用するSCSS記法を指します。

おわりに

第4回はここまでになります。

現在のWeb制作では純粋なCSSのみで制作をして管理されるということは少ないかもしれません。
Sassを使うことでプログラミングに近い要素を取り入れてCSSを拡張することができます。
しかし、プログラミングに近い要素といっても難しく考える必要はなく、あくまでCSSの補助と捉えて最初は少しずつ取り入れていく形でも良いでしょう。

次回は、Sassのコンパイル方法について触れていきたいと思います。



この記事は『現場のプロから学ぶ CSSコーディングバイブル』の内容を引用し加筆しています。
今回の内容は、『現場のプロから学ぶ CSSコーディングバイブル』にてより詳しく解説しています。
ぜひ、お手にとってご覧ください!よろしくお願いいたします。


絶賛発売中です!
ただいま、ご購入いただいた方に、特典PDFをプレゼントするキャンペーンを実施しますのでぜひともチェックしてみてください。


田村 章吾(タムショー)
ましじめ株式会社代表 北九州市在住。 『現場のプロから学ぶ CSSコーディングバイブル』の著者。 CMSを中心としたWeb制作をしています。

ましじめのスキルが必要ですか?

ウェブののましじめ