HTML&CSS

SassでプログラムのようにCSSを効率的に記述する方法

ProgateでSassを学習したので、復習の意味もこめて学習内容をまとめておきます。

Sassとは?

Sass(サース、サス)とはCSSをプログラムのように記述することができるRubyで作成されたメタ言語になります。

ちなみにメタ言語とは

メタ言語(メタげんご、英 Metalanguage)とはある言語について何らかの記述をするための言語である。それだけでは具体的な利用に関する目的をもっておらず、特定のルールを加えることで具体的な応用として利用可能となる。

https://ja.m.wikipedia.org/wiki/メタ言語

とのことなので、Saasの場合はCSSを記述するための言語ってことですね。

SassはCSSを入れ子構造で記述できたり、変数を使ってカラーコード等を管理したり、関数でスタイルをまとめたりできるので何度も同じ内容を記述する必要がなくなり、かなりすっきりと記述することができます。

Rubyのインストール

SassはRubyで作成されているので、Sassをインストールする前にRubyをインストールする必要があります。

MacにはRubyはデフォルトでインストールされているのでインストールは不要ですが、Windowsの方はRubyInstallerからインストールする必要があります。(自分はMacを使用してるので、RubyInstallerでのRubyのインストールは割愛させていただきます。)

Macの場合はターミナル、Windwosの場合はコマンドプロンプトでRubyのバージョン確認コマンドを実行してバージョンが表示されることで、Rubyがインストールされているかを確認できます。

Sassのインストール

ターミナル(コマンドプロンプト)にて下記のコマンドを実行することでインストールできます。

実行後に以下のSassのバージョン確認コマンドを実行し、バージョンが表示されればSassのインストールは完了です。

Sassの作成

SassにはSASS記法とSCSS記法の2種類がありますが、よりCSSに近い記法であるSCSS記法のほうが一般的です。

以下のようなCSSをSASS記法とSCSS記法それぞれで記載するとどうなるかを見ていきます。

SASS記法

SASS記法は{}を使用せずにインデントのみで階層を表現して記述します。また、値の後の;も省略します。

SCSS記法

SCSS記法は{}を使用して入れ子構造で階層を表現して記述し、CSSと同じような感覚で記述できます。

Sassのコンパイル

SassはあくまでCSS作成するためにSassを作成しているだけなので、SassをコンパイルしてCSSを作成する必要があります。

Sassをコンパイルするにはターミナル(コマンドプロンプト)にて以下のコマンドを実行します。

記法の例として記述したSASSをコンパイルすると下記のようなCSSが作成されます。

Sassのインストールに失敗した場合

自分はSassのインストール時に以下のようなエラーが発生してインストーオルに失敗しました。

下記のQiitaの記事を参考にして、Xcodeのコマンドラインツールのインストールを行い解決できました。

MacOS SierraでSassがインストール出来ない時の解決策

まとめ

  • SASSはCSSをプログラムちっく記述できる
  • 入れ子構造や変数、関数が使用できるから素でCSSを記述するよりも効率的に書ける
  • SASSの記法はSASS記法、SCSS記法の2種類があり、CSSのように記述できるSCSS記法が一般的
  • SASSをインストールするにはRubyが必要
  • SASSはコンパイルしてCSSを作成しないと意味がない
  • SASSの変更を監視して自動でコンパイルもできるらしい(別の記事で書きます)
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す