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

macbook-sass-install

 

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

 

Sassとは

Sass-image

Sassとは何か簡単に言うと、

CSSをプログラミング言語っぽく書ける言語であり、
cssを綺麗に、より効率的に書くことができる(cssの上位互換)言語のことだ。

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

 

 

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

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

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

 

順に説明していく。

 

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

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

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

# rubyがインストール済みか確認

which ruby

■コマンド実行結果

rubyがインストールされているか確認するコマンド

 

/usr/bin/rubyと表示されているように、rubyがインストール済みの場合、rubyへの絶対パスが表示される。

 

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

次にgemコマンドでSassをインストールする。

gemとは?

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

 

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

# gemコマンドでsassをインストール
gem install sass

# または
sudo gem install sass

■コマンド実行結果

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

 

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

上記の様に結果が表示されていれば、無事sassがインストールされた。

 

試しにSassを使ってみる

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

 

① .scssファイルの作成

sassコマンドを扱う際、使用するのは.scssという拡張子のファイルだ。
なので、まずは、.scssの拡張子のファイルを作成する。

#.scssのファイルを作成

vi test.scss

作成した.scssファイルに、Sassの書式でスタイルを記述する。

# test.scss

main {
    background-color: red;
    p {
        font-size: 20px;
        display: inline;
    }
}

「main」のスタイル定義の中にさらに「p」のスタイル定義がされている(ネスト構造)。
このネスト構造の記述方式は、通常のcssでは不可能な記述である。

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

 

② sassコマンドでコンパイル

.scssファイルにsassの書式でcssを記述したら、
記述した.scssファイルをコンパイルしていく。

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

sass-compile-image

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の使い方まとめ

 

  1. MacBookへSassをインストールするには、gemコマンドを使用する。
  2. sassを使うとcssを綺麗に、効率よく書くことができる
  3. sassファイル(.scss)はコンパイルが必要

 

参考:

https://book.scss.jp/code/c2/02.html

https://sass-lang.com/

 

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

コメントを残す

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