ぐへへっ！「人としてポンコツ」と言われたKameです。
普段からSassを使っておりますが、珍獣流のSassの利用法みたいなのを晒してみたいと思います。
あんまりかっこいいもんじゃないです。
こうしたほうがいいとかこれ非効率じゃね？みたいなのがあったらドシドシ叫んでください。
フォルダ構成
まずはどういう構成でscssファイルからcssファイルに変換させるかです。
以前はcssフォルダの中にまとめてscssファイルを入れていたりもしました。
しかしこれだと大きいサイトで複数のcssファイルを扱う際には同じ名前のscssファイルとcssファイルがあったりで、かなり混乱してしまいます。
ですのでcssフォルダと同階層に_sassフォルダというのを作って、そこにscssファイルをまとめておいてます。
そのフォルダ内で変更のあったscssファイルをcssフォルダに吐き出させるには以下のコマンドでできます。
$ sass --watch _sass:css -t expanded
これで_sassフォルダからcssフォルダへcssファイルが吐かれるようになります。
しかしながらこれでも問題なのが、cssフォルダが数カ所にあるようなサイトです。
その場合上記のコマンドでは1対のフォルダしか指定していないため、
違うcssフォルダに変更がある場合はいちいちコマンドし直さなければなりません。
僕の場合2つターミナル起動させて別々のフォルダ指定するなんてことをしてたりもしました。
そこで最近気づきました。もうね、すぐ分かるやんってレベルの…。
$ sass --watch _sass:css common/_sass:common/css -t expanded
半スペ入れてつなげて指定してやったらイケるんですね。
もう0.5秒でもう一つ開いてたターミナル閉じましたね。恥ずかしい。
フォルダ構成はこんな感じにしています。
後は間違ってサーバへアップしてしまわないようにfilezillaの設定で_sassフォルダをフィルタリングして表示しないようになどしておけばもっと便利ですね。
import
グローバルで使う変数やclearfixなんかはimport.scssというのを作ってそこにまとめて指定しています。
$base:#111111;
$link:#0000FF;
$hover:#0066FF;
$border:1px solid $base;
.clearfix {
*zoom: 1;
&:after {
content: "";
display: block;
clear: both;
height: 0;
}
}
みたいな感じです。そしてコレをインポートさせるファイルの冒頭で、
@import "import";
で読み込んでやればOKです。どうやらscssファイルをインポートする場合は拡張子つけなくてもいいみたいです。
よく使いそうなmixinやextend用のクラスなんかもここへ書いておくといいかもですね。
思ったこと
最後に思ったことですが、ワレワレはよくhtmlの構造は結構考えて制作にあたっています。
この部分はincludeさせてとかcssはcommonを読ませてとかjsもコレを読ませてとか。
しかしながらcssに関しては今までそこまで考えなくダラーッと書いておりました。
Sassとかlessの登場で改善できるメリットの一つは上記のimportを使ったりしてcssを構造的に書いていけることだと思うんですね。
（あんまり何言ってるのか分かってません。）
このあたりもMEに求められるスキルになってくるのかな（なったらいいな）みたいに思いました。
これからはcssもデザインする時代ですね。