(Sass) MacBookにSassをインストールする手順

macbook-sass-install

 

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

 

Sassとは

Sass-image

CSSをプログラミング言語っぽく書ける言語、
cssを綺麗に、より効率的に書くことができる。

Sassの機能や魅力については、下記記事にまとめたので、参考にして欲しい。

 

 

インストール手順

 

では本題、MacBookにインストールする手順を紹介していく。
と言っても下記の二つの項目を実施してもらうだけだ。

SassをMacBookへインストールする手順
  1. rubyがインストール済みなのを確認
  2. gemコマンドでSassをインストール

 

 

①rubyがインストール済みなのを確認

まずはrubyがPCにインストールされている必要がある。
後述のgemコマンドを使うために、rubyが必要だからだ。

しかし、MacBookなら標準でインストールされているらしい。
whichコマンドで、rubyがインストールされているか確認しよう。

 

 

②gemコマンドでSassをインストール

gem(ジェム)はRuby用のパッケージ管理システムだ。

こちらもrubyがあればすでにインストールされているはずなので、
gem install sassと打ってインストールする(※rootユーザ以外は sudo で実行してね)

 

gem install sass
gemコマンででsassをインストールする画像

インストールが終わったあとは、whichコマンドで一応確認しておこう。
また、「sass -v」と打つと、インストールされたSassのバージョンを調べることができる。

無事sassがインストールされた。

 

試しにSassを使ってみる

 

では試しに、普通のcssの代わりに、Sassを使用してスタイルを整えてみよう。

 

.scssファイルの作成

sassコマンドを扱うのは.scssという拡張子のファイルだ。

適当にsassのネストの文法を使って「test.scss」を作ってみる

 

通常のcssでは不可能な記述である、「main」のスタイル定義の中に、さらに「p」のスタイル定義がされている。

これで「mainの中のp」に対して、指定したスタイル(font-size: 20pxとdisplay: inline)が適用されるはずである。

 

sassコマンドでコンパイル

コンパイルは簡単にいうと、ソースコードが動く形のものに変換する作業のことだ。
.scssファイルにSassの記述をし、そのファイルをコンパイルすることで、初めてスタイルシートとして動作するcssファイルが作られる。

sass-compile-image

Sassコンパイルの書式は下記

sass [コンパイルする.scssファイル]:[出力するcssファイル名] --style [アウトプットスタイル]

 

アウトプットスタイルとは簡単に言えばcssの記述方式だ。
アウトプットスタイルについての詳しい解説は割愛するが、今回は世間一般のcssに一番近い「expanded」というスタイルを指定する。

 

test.scssを、test.cssという名前でコンパイルするコマンドは以下のようになる

 

コンパイルの結果を見てみる

見慣れたcssの形にコンパイルされた

 

まとめ

MacBookはgemを使って簡単にsassをインストールできる

sassを使うとcssを綺麗に、効率よく書くことができる

sassファイル(.scss)はコンパイルが必要

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。