2017年8月4日
Sass+compassという選択肢
Sassにおける@mixinの有用性は前回まででお伝えしましたが、実際に@mixinを設定するのはちょっと面倒だと感じます。
もちろん初めだけというのはわかっているのですが。ノウハウが蓄積すれば自分用@mixinスニペット集なんかを作ると便利でしょう。
そこで、今回はcompassの紹介です。
compassはSassのフレームワークという位置づけです。
フレームワークというと、便利機能集的存在のため、様々な機能が提供される代わりに余計な機能も提供されるデメリットがあります。
しかし、compassの場合はCSSプリプロセッサ―のフレームワークのため、Sassで設定しない限りCSSに余計なセレクタが追加されることはありません。
本当に黒子的存在ですね。
compassの導入方法
既にSassが導入されている前提ですすめます。
Sassの導入がまだの方は以下の記事を参照してください。
Macの場合はターミナルで、Winの場合はCMDより以下をたたいてください。
gem install compass
以上です。
compassの使用準備
compassを使用するフォルダをまずは作ってください。
最終的にCSSにコンパイルするので、プロジェクトの作業用フォルダという位置づけで問題ないと思います。
ターミナルやCMDで作成したフォルダまでCDで移動してください。
作成したフォルダ上で
compass create
と入力するとcompassのファイルが自動生成されます。
├─ config.rb
├─ sass
│├─ ie.scss
│├─ print.scss
│├─ screen.scss
├─ stylesheets
│├─ ie.css
│├─ print.css
└─ screen.css
compassのインポート方法
SCSSファイルのインポートとまったく同じで
@import
でできるそうです。まだ試していないので、実際に利用したら詳細を書きます。
Sassのコンパイル
コンパイルする場合は、いままでは
sass –watch style.scss:style.css
とコンパイル前のSCSSファイルとコンパイルするCSSを指定する必要がありますが、compassの場合は
compass watch
と入力するだけで、自動でコンパイルされます。
コメントを書く