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

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

Sassとは？
Rubyのインストール
Sassのインストール
Sassの作成
SASS記法
SCSS記法
Sassのコンパイル
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がインストールされているかを確認できます。

; Rubyバージョン確認コマンド
ruby -v
; コマンド結果
ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin18]

; Rubyバージョン確認コマンド

ruby -v

; コマンド結果

ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin18]

Sassのインストール

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

gem install sass

1	gem install sass

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

; Sassバージョン確認コマンド
Sass -v	
; コマンド結果
Ruby Sass 3.7.4

; Sassバージョン確認コマンド

Sass -v

; コマンド結果

Ruby Sass 3.7.4

Sassの作成

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

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

.class1 {
	margin: 0;
	padding: 0;
}

.class1 div {
	backgroud-color: red;
}

.class1 div h1 {
	color: black;
}

.class1 div p {
	color: blue;
}

.class1 {

margin: 0;

padding: 0;

}

.class1 div {

backgroud-color: red;

}

.class1 div h1 {

color: black;

}

.class1 div p {

color: blue;

}

SASS記法

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

.class1
	margin: 0
	padding: 0
	div
		backgroud-color: red
		h1
			color: black
		p
			color: blue

.class1

margin: 0

padding: 0

div

backgroud-color: red

color: black

color: blue

SCSS記法

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

.class1 {
	margin: 0;
	padding: 0;
	div {
		background-color: red;
		h1 {
			color: black;
		}
		p {
			color: blue;
		}
	}
}

.class1 {

margin: 0;

padding: 0;

div {

background-color: red;

h1 {

color: black;

}

p {

color: blue;

}

Sassのコンパイル

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

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

sass コンパイルするSASSファイル名.scss:出力するCSSファイル名.css

1	sass コンパイルするSASSファイル名.scss:出力するCSSファイル名.css

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

.class1 {
	margin: 0;
	padding: 0; }
	.class1 div {
		backgroud-color: red; }
		.class1 div h1 {
		color: black; }
		.class1 div p {
		color: blue; }

.class1 {

margin: 0;

padding: 0; }

.class1 div {

backgroud-color: red; }

.class1 div h1 {

color: black; }

.class1 div p {

color: blue; }

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

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

Fetching: ffi-1.11.1.gem (100%)
Building native extensions.  This could take a while...
ERROR:  Error installing sass:
	ERROR: Failed to build gem native extension.

	current directory: /Library/Ruby/Gems/2.3.0/gems/ffi-1.11.1/ext/ffi_c
/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby -r ./siteconf20190902-1020-eld9an.rb extconf.rb
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/include/ruby.h

extconf failed, exit code 1

Gem files will remain installed in /Library/Ruby/Gems/2.3.0/gems/ffi-1.11.1 for inspection.
Results logged to /Library/Ruby/Gems/2.3.0/extensions/universal-darwin-18/2.3.0/ffi-1.11.1/gem_make.out