SassやらSCSSやらCompassやらを最近使っているんだ！！
- カテゴリ:
- ウェブ制作
私も最初「Sass」ってなんやねん？って思っておりました。
そしたら、よく調べてみるとスタイルシートを効率よく書くことのできる開発環境みたいなものだったんですね。
そしてその「Sass」で作るスタイルシートを「SCSS」というようです。
私自身、もともとスタイルシートってめんどくせぇなぁって思っている人だったので、
この「SCSS」の登場は願ってもないものでした。
自分もSCSS導入にあたって、色々なサイトを調べて試しながら現在の開発環境を手に入れたので、
そこらへんをちょっと紹介したいと思います。
参考にしたサイト
http://hayashikejinan.com/webwork/239/
使うソフトは以下の二つを使っています。
- Netbeans7.4
- Koala
まず、使っているエディターは「Netbeans7.4」です。
「7.4」からSCSSが正式にサポートされたようで、プラグインなどを
入れなくてもSCSSのコーディングに対応してくれているようです。
「7.3」以下だとプラグインのインストールが必要です。
[caption width="320" align="alignnone"]
私の好きなNetbeans。正直Dreamweaverより使いやすい・・・[/caption]そして「Koala」というのはSCSSファイルを通常のCSSファイルにコンパイルしてくれる
ソフトです。SCSSはそのままだとHTMLに認識されませんので、CSSに変換する必要が
あります。SCSSで効率よく書いて、CSSに変換するといった流れですね。
[caption width="600" align="alignnone"]
これがKoalaです。[/caption]こちらのKoalaさんに作業しているフォルダを登録してあげるだけで、
SCSSを保存するたびに自動でCSSに変換してくれます。
最初はこのKoalaさんを使わずに、Netbeansでコンパイルするように試してみたのですが、
設定がうまくいきませんでした。そんな中このKoalaさんがあると知ったので、
なんかかわいいし、これ使うかってな感じでこちらを使うことにしました。
[caption width="300" align="alignnone"]
これがKoalaのアイコンです。[/caption]んで、このSCSSですが、使えるようになるには参考サイトにも書かれているのですが、
Rubyをインストールしたり、コマンドプロンプトを使ったり、
デザイナーにとってはちょっと面倒かもしれません。
ただ、個人的には導入してからすごくCSSを書くのが楽になりました。
普段プログラミングをしている感覚と近いかんじでCSSをあつかえるようになったかなと思います。
自分的にちょっとデメリットになるのかなと思っているのは
なんでもかんでも入れ子構造で書いちゃって、結局省略できるはずのセレクタまで記述しちゃって
サイトのパフォーマンスを下げてしまう可能性があるのかなぁとは思いました。
[css]
#main {
width: 600px;
p {
margin-bottom: 1.5em;
}
}
[/css]
SCSSだとこんな感じで入れ子にスタイルを書くことができます。
ただ、そんなにアクセス集めないサイトであれば気にする必要もないとは思いますが。
まぁとにかくCSSを書くのが楽になったってのは自分にとってはものすごく大きいことなので、
今後もバリバリ使っていくとは思います。
その使っていた経緯など、こんな便利なことができるんだ〜ってことは
これから記事に書いていきたいのでよろしくお願いします。
コメント