SassでCSSを書く時に気をつけようと思った事この広告は、90日以上更新していないブログに表示しています。2014-02-23SassでCSSを書く時に気をつけようと思った事Sass先日Sassの勉強会に参加してからというもの自分が書いたscssを見直す癖がついてきたのですが、だんだん作り替えたい衝動が強くなってきて悶々としてきた。理由は、勉強会でも指摘されてたSass導入前に書いてたCSSとコンパイル後のCSSは同じですか?という言葉です。Sassはとても便利な機能がたくさんあります。コードを書くのも手打ちしてた時より効率的に書けるし、@mixinや@extendなどの機能もとても便利なので色々なところに使ってる。コンパイルした後のコードをきちんと考えて作ってたかな?scssで記述する方にばっかり気がいってしまって、コンパイルされた後のCSSってあまり気にしてなかった。@extendの記述位置は気をつけないと、手打ちだったら絶対書かないようなCSSになってしまう。そんな事を考えてたら、もう一度構成から作り直したくてしかたなくなってきた。scssで書く時も普段手打ちする感じでclassを作ってからcompassのmixin入れたりしてるので、コンパイル後の形もあまり変わらないのですが、問題はextendの使い方なのかなと。mixinの中で別のmixinを使う時、その名前に変数をあてる事ができないが、extendならclass名だから変数をあてる事ができる。これがかなり助かったりする。何かの形でグラデだけ色が違うものを何パターンも作りたい時などは、グラデだけのclassを作って、mixinの中でclassを変数名にして対応したりする。ボタンとかのmixinでよくやってる。btn-grad("normal",280,"blue");ただ、この場合mixinの記述より前にグラデのclassを作っておかないといけないから、グラデ指定のclassが最初に各色分記述された後にボタンのclassが記述される感じになる。本当なら、mixinにしておいてボタンのclassの中に一緒に記述されるといいんだけど、変数があてられないから仕方ない。こんなのが増えてくと、バラバラなコードが増えてって好ましくない。extendの扱いは便利な分難しい。半年試行錯誤して構成やルールを決めながら進めてきたけど、勉強会で色々な方の話を聞いて、最初からきちんと決めなきゃダメって思った。書いてみてから気がついて直せる規模ならいいが、運用しているものを直すのはかなりのエネルギーと時間が必要と痛感。やってみなきゃ分からない事もまだまだ多いし、気がついたら...という事もあるので、まずは『手書きで書いてた時にはこんな書き方したかな?』って事を意識して書いていく癖をつけるのを目標に精進していこう。読者になるEntries手書きの楽しさと初めての万年筆とインク銀座ロフトの内覧会に行ってきました明けましておめでとうございます大掃除:規格変更の罠にはまる。tanicoはてなブログをはじめよう!tanicoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。