fragment.log

まったりのんびり日々の事と時々コード

SassでCSSを書く時に気をつけようと思った事

先日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でよくやってる。

%normal-blue-grad{
    @include background-image(linear-gradient(top, #005aff, #0018ab));
}
@mixin btn-grad($classname,$width,$color){
  .btn-#{$classname}{
    display:block;
    margin: 0 auto;
    padding: 5px 0;
    width: $width + px;
    @include border-radius(8px);
    @extend %#{$classname}-#{$color}-grad;
    a{
        display:block;
        width: $width + px;
        color: #fff;
        text-align: center;
        text-decoration: none;
    }
  }
}
@include btn-grad("normal",280,"blue");

ただ、この場合mixinの記述より前にグラデのclassを作っておかないといけないから、グラデ指定のclassが最初に各色分記述された後にボタンのclassが記述される感じになる。
本当なら、mixinにしておいてボタンのclassの中に一緒に記述されるといいんだけど、変数があてられないから仕方ない。
こんなのが増えてくと、バラバラなコードが増えてって好ましくない。
やっぱ、extendの扱いは便利な分難しい。

半年試行錯誤して構成やルールを決めながら進めてきたけど、勉強会で色々な方の話を聞いて、最初からきちんと決めなきゃダメって思った。
書いてみてから気がついて直せる規模ならいいが、運用しているものを直すのはかなりのエネルギーと時間が必要と痛感。
ただ、やってみなきゃ分からない事もまだまだ多いし、気がついたら…という事もあるので、まずは『手書きで書いてた時にはこんな書き方したかな?』って事を意識して書いていく癖をつけるのを目標に精進していこう。

© tanico