【Sass】導入と使い方

#はじめに
ポートフォリオを作るにあたりcssを書こうと思ったのですが、
sassというものがあると知ったので導入しました。
途中、エラーが出たところもまとめます。

#sassとは何か

#sassの導入

私はmacを使っているのでRubyの導入では何もしてません。

####sassインストール
Sassを使ってCSSを爆速コーディング！Sassの導入方法と使いかた。に書いてある通り、
下記コマンドを実行するが

$ gem install sass

ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory.

エラー...

gem installでpermissionエラーになった時の対応方法
こちらの記事の現状確認と同じコマンドを実行すると、全く同じ結果が返ってきました。

なので私もrbenvというやつを入れます。（rubyのバージョン管理をしてくれるものなのかな..）
記事の通り、最新版のrubyをインストールしたので、私の場合は2.6.3です。

$ rbenv install 2.6.3

$ rbenv versions
* system (set by /Users/hoge/.rbenv/version)
  2.6.3

この後からは先ほどの記事とは違うことを行いました！

記事では、rbenvでインストールしたrubyのバージョンをglobalにしていますが、
他のアプリに影響を与えたくないので今回はlocalで利用します。

$ cd ver2.6.3のrubyを使いたい作業ディレクトリ
$ rbenv local 2.6.3

$ rbenv versions
  system (set by /Users/hoge/.rbenv/version)
* 2.6.3

その後パスを通します。
~/.bash_profileにeval "$(rbenv init -)"を追記します。

パスを更新したいので、

$ source ~/.bash_profile
$ ruby -v
  ruby 2.6.3

できました！

今回はglobalでなくlocalにしているので、
rbenv local 2.6.3コマンドを実行したディレクトリ下でのみこのバージョンが適応されます。

#今度こそSassインストール

$ gem install sass

できた...

#使い方
Sassを使ってCSSを爆速コーディング！Sassの導入方法と使いかた。
こちらの記事の実際に使ってみるを参考にしました！
私はscssにしました。

##参考にしたサイト（ありがとうございます><）
これからはcssはSassで書こう。
Sassを使ってCSSを爆速コーディング！Sassの導入方法と使いかた。
gem installでpermissionエラーになった時の対応方法
rbenvでバージョンがうまく切り替わらなかった時にやったこと

#使ってみて
cssで書くよりもきれいに書けるのと、みやすいのでこれからもガンガン使っていきたいです！
参考になるサイトがたくさんあって助かりました。ありがとうございます。

ポートフォリオサイトを少しだけ更新しました。
FontAwsomやtwitterタイムラインを載せたので、手順やメモをまた投稿しようと思います。