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の書き方〜コンパイル方法を紹介します。
この記事の読んだ方におすすめ