Sass２日目:変数を使う
Sass２日目は変数を使って業務効率化
今日は変数を使って効率化！
$で変数を定義して、呼び出し。
そう、ただそれだけ！
@import “base”;
そして、別のscssを読み込みしたい時は上記の様にimportするだけ。
ただし、アンダースコアをファイルの前に記述します。すると余計なファイルの生成がされず、style.cssに_base.scssの内容が記載されます。
ITかあさん初めてのSass
ITかあさん初めてのSass
あら、あなたまだSassやったことないんですか？（え、ええ。サーバーサイドエンジニアになってから全くCSSとはご無沙汰でしたから
そんな訳でITかあさんは今日初めてちゃんとSass環境を整え、今日初めてコンパイルを行いました。忘れないためにもきちんと書き記しておこうと思います。なお、Mac環境での構築で話を進めますのでWindows,Linuxの方はごめんなさい。
Sass環境を整える手順
Sassのインストールは下記5ステップ。なお、コンパイルには色々便利なGUIツールがあると存じますが、GUIよりもターミナルが楽なので（個人的に）今回はターミナルからコマンドを実行してSassのコンパイルを行いたいと思います。
- 1.Rubyのインストまたはアップデート
- 2.Gemのアップデートとインスト
- 3.Sassインスト
- 4.初めてのコンパイル
Rubyのバージョン確認
Sassの公式によると、エンコーディングでグッドなサポートはしてないから、Rubyのバージョンは1.9以上じゃないとだめよということを言っていますので、Rubyのバージョンが1.9以上であることを確認し、1.9より低いバージョンであればRubyのバージョンをまずは上げましょう
Sass Changelog
$ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]
gem update
Ruby言語用のパッケージ管理がRubygemです。
Rubyがインストされていればgemは一緒に入っているはずですが古いバージョンであることが多いので、最新のパッケージにしてあげましょう。
$ sudo gem update –system
Updating rubygems-update
Fetching: rubygems-update-2.5.0.gem (100%)
Successfully installed rubygems-update-2.5.0
Parsing documentation for rubygems-update-2.5.0
Installing ri documentation for rubygems-update-2.5.0
Installing darkfish documentation for rubygems-update-2.5.0
Installing RubyGems 2.5.0
RubyGems 2.5.0 installed
Parsing documentation for rubygems-2.5.0
Installing ri documentation for rubygems-2.5.0
gem updateが終了したら、gemでSassのインストをします
Sassはgemでインストールをします。
$ sudo gem install sass
Successfully installed sass-3.4.19
Parsing documentation for sass-3.4.19
1 gem installed
matsudachihiro$ sass -v
Sass 3.4.19 (Selective Steve)
Successfully installed sass-3.4.19
Parsing documentation for sass-3.4.19
1 gem installed
matsudachihiro$ sass -v
Sass 3.4.19 (Selective Steve)
これでSassのインストールは完了しました。
初めてのコンパイル
これで環境は整ったので後は初めてのコンパイルです。
SCSSでは普通のCSSでも書けるよ、という知識くらいは持っているので一先ず普通のCSSを今回は書きました。ディレクトリ構成は下記の通り。
sassフォルダを作って、sassフォルダにstyle.scssというファイルを作り、コンパイル実行でstyle.cssがcssフォルダに作られればOK
/public_html/
∟/sass/style.scss
∟/css/style.css（コンパイルされるとstyle.cssが生成される）
∟/sass/style.scss
∟/css/style.css（コンパイルされるとstyle.cssが生成される）
カレントディレクトリ（現在自分がいる場所）がpublic_htmlだとしたらコマンドは下記の通り
$ sass –watch sass:css –style expanded
>>> Sass is watching for changes. Press Ctrl-C to stop.
write css/style.css
write css/style.css.map
>>> Sass is watching for changes. Press Ctrl-C to stop.
write css/style.css
write css/style.css.map
sass（scssがあるフォルダ）:css（コンパイルされたファイルの生成場所）
コンパイルするコマンドを実行するとしばらくしてファイルが生成されます。パスが間違っていて生成に失敗するとエラーがでます。
細かいコンパイルのオプションについてはまた今度！
今日もお疲れさまでした！