macユーザーのためのSass導入方法

フロントエンド

爆速でコーディングしたい!効率良くコーディングしたい!って方に役立つ「Sass」の
導入方法をご紹介します。


Sassとは


Sassとは、Webページのレイアウトや修飾情報の指定に用いられるCSS(Cascading Style Sheet)を記述するための言語(メタ言語)の一つ。また、同言語で記述したファイルをCSSファイルへ変換するソフトウェア。
プログラミング言語の仕様を取り入れて効率的にCSSを定義できるようにした言語で、変数や算術演算、セレクタ指定の入れ子(ネスト)、外部ファイルの読み込み、複数のCSS定義の結合(ミックスイン)など、CSSにはない機能を利用することができる。

IT用語辞典 e-Wordsより

ざくっと言えば、CSSを入れ子にしてかけたり「{」を省けたりと、基本的な書き方はCSSと同じなのに効率良くコーディングができちゃうものです。

さっそくSassを導入しよう

その前に

Sass導入時に「ターミナル」を使用するので開きましょう。
ターミナルは
「アプリケーション > ユーティリティ > ターミナル」の手順で探してください。


起動してみると開かれるのがこの画面です。


"コンピュータ名" : ~ "ディレクトリ名" $ という表示になっています。
この「$」の後にコマンドを打ち「return(enter)」で実行されます。


Rubyをインストール


macには最初から標準で搭載されていると思うのでインストールは必要ないです。
Windowsの人は下記からのダウンロードが必要です。
Rubyインストール
macでは搭載されてるけど、本当に入ってるか心配・・・なんて人はターミナルで

ruby -v

て打ち込めば確認できます。バージョン確認もこれでできます。
「 -v 」の前に半角の空白を忘れると「command not found」 って出るので注意。

本題のSassのインストール

ターミナルで

sudo gem install sass

その後パスワードを聞かれますのでPCのパスワードを打ち込めばインストールが開始されます。

少し待つと「installed」と最後に書いてある文章が出ればインストール完了です。

番外編 - アップデート方法

Sassを最新版へアップデートしたい場合には

sudo gem update sass

アップデートできる場合は

もう既に最新版の場合は

という文章が表示されます。

あとがき

最初はSassをインストールする時点で難しくてできないと思っていましたが、ずっと避けるわけにもいかないのでインストールしてみました。
ターミナルは必須ですが順序を間違えなければ誰でもできるはずですのでぜひインストールすることをおすすめします!
今回は導入方法〜アップデート方法までを紹介しました。
次はSassの書き方〜コンパイル方法を紹介します。


この記事の読んだ方におすすめ