macでscss環境構築(rubyセットアップ)が意外と面倒だった…。
ドットインストールでscssについて学んでみた。
https://dotinstall.com/lessons/basic_sass
scssって、Sassy(カッコいい・イカした) CSSの略なのか…。Super CSSの方が非ネイティブには分かりやすい。
1, Sassのインストールって、rubyのgemから行うの！？ なんか、もっと中立的なものかと思ってた。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
# rubyが入っているか確認 ruby -v ruby 2.6.3p62 # rubyのパッケージ管理システムのgemをupdate sudo gem update --system # sassをインストール sudo gem install sass ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /usr/bin directory. |
システムのrubyじゃなくて、homebrewでrubyをインストールしないとダメっぽい。
https://qiita.com/chihiro/items/efdf8b88865b7a93971f
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
# rbenv(複数のバージョンのrubyを共存できるツール) brew install rbenv # rbenv のセットアップ rbenv init # rbenvのパスを通す echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc echo 'eval "$(rbenv init -)"' >> ~/.zshrc source ~/.zshrc # rbenvのセットアップ完了！ rbenv --version rbenv 1.1.2 # インストール可能なrubyのバージョンを表示 rbenv install -l 1.8.5-p52 1.8.5-p113 1.8.5-p114 1.8.5-p115 1.8.5-p231 ... ... 2.7.1 2.8.0-dev # 安定版で最新の2.7.1のrubyをインストール rbenv install 2.7.1 # 全てのシェルでこのバージョンを使用したいため、global設定を行います。 rbenv global 2.7.1 # ruby2.7.1になった。 ruby --version # ruby本体の場所も変わった which ruby /Users/bell/.rbenv/shims/ruby |
今度こそsassのインストール
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
# rubyのパッケージ管理システムのgemをupdate gem update --system # sassをインストール gem install sass # やっとsassのインストール完了！ sass --version Ruby Sass 3.7.4 # scss/main.scssファイルを、css/main.cssへビルド # --style expandedオプションで整形 sass --style expanded scss/main.scss:css/main.css |
やっと、hello,world的な事が出来た。
scss環境構築で疲れるわ〜。
main.css
|
1 2 3 4 5 6 |
#main{ width: 90% p{ font-size: 14px; } } |
main.css
|
1 2 3 4 5 6 |
#main { width: 90% p; width-font-size: 14px; } /*# sourceMappingURL=main.css.map */ |