cssをより簡単に、かつ優れた機能を持ち合わせた「Sass」について、MacBookにインストールする方法をまとめました。
Contents
Sassとは

CSSをプログラミング言語っぽく書ける言語、
cssを綺麗に、より効率的に書くことができる。
Sassの機能や魅力については、下記記事にまとめたので、参考にして欲しい。
MacBookにSassをインストールする手順
では本題、MacBookにインストールする手順を紹介していく。
と言っても下記の二つの手順を実施してもらうだけだ。
- rubyがインストール済みなのを確認
- gemコマンドでSassをインストール
順に説明していく。
①rubyがインストール済みなのを確認
まずはrubyがPCにインストールされている必要がある。
後述のgemコマンドを使うために、rubyが必要だからだ。
しかし、MacBookなら標準でインストールされているらしい。
whichコマンドで、rubyがインストールされているか確認しよう。

②gemコマンドでSassをインストール
gem(ジェム)はRuby用のパッケージ管理システムだ。
こちらもrubyがあればすでにインストールされているはずなので、
「gem install sass」と打ってインストールする(※rootユーザ以外は sudo で実行してね)
# gemコマンドでsassをインストール
gem install sass
# または
sudo gem install sass

インストールが終わったあとは、whichコマンドで一応確認しておこう。
また、「sass -v」と打つと、インストールされたSassのバージョンを調べることができる。
無事sassがインストールされた。
試しにSassを使ってみる
では試しに、普通のcssの代わりに、Sassを使用してスタイルを整えてみよう。
.scssファイルの作成
sassコマンドを扱うのは.scssという拡張子のファイルだ。
適当にsassのネストの文法を使って「test.scss」を作ってみる
vi test.scss
# test.scss
main {
background-color: red;
p {
font-size: 20px;
display: inline;
}
}
通常のcssでは不可能な記述である。
「main」のスタイル定義の中にさらに「p」のスタイル定義がされている。
これで「mainの中のp」に対して、
指定したスタイル(font-size: 20pxとdisplay: inline)が適用されるはずである。
sassコマンドでコンパイル
コンパイルは簡単にいうと、ソースコードが動く形のものに変換する作業のことだ。
.scssファイルにSassの記述をし、そのファイルをコンパイルすることで、初めてスタイルシートとして動作するcssファイルが作られる。

Sassコンパイルの書式は下記
#sassコマンドでのコンパイル書式
sass [コンパイルする.scssファイル]:[出力するcssファイル名] --style [アウトプットスタイル]
アウトプットスタイルとは簡単に言えばcssの記述方式だ。
アウトプットスタイルについての詳しい解説は割愛するが、今回は世間一般のcssに一番近い「expanded」というスタイルを指定する。
test.scssを、test.cssという名前でコンパイルするコマンドは以下のようになる
# test.scssを、test.cssにコンパイル
sass test.scss:testcss --style expanded
コンパイルの結果を見てみる
view test.css
main {
background-color: red;
}
main p {
font-size: 20px;
display: inline;
}
見慣れたcssの形にコンパイルされた
MacへSassをインストールする方法 〜 Sassの使い方まとめ
- MacBookへSassをインストールするには、gemコマンドを使用する。
- sassを使うとcssを綺麗に、効率よく書くことができる
- sassファイル(.scss)はコンパイルが必要
(Sass) Sassの基本機能まとめ