2012-01-02

@silent directive coming soon to Sass?

Compass開発者のChristopher M. EppsteinがSassに@silentというディレクティブを追加してた。どうやら待望の出力CSSに含めないCSSルールを書けるようになるもののようで、これがマージされれば思う存分@extendまくれそう。

カラム定義も

$col: 60px;
$gap: 20px;

@function column-width($i) {
  @return ($col * $num) + ($gap * ($num - 1));
}

.column {
  @silent;
  margin-right: ($gap / 2);
  margin-left: ($gap /2);
  float: left;
}

#main {
  @extend .column;
  width: column-width(9);
}

#sidebar {
  @extend .column;
  width: column-width(3);
}

という感じで書け、

#main,
#sidebar {
  margin-right: 10px;
  margin-left: 10px;
  float: left }
#main {
  width: 700px }
#sidebar {
  width: 220px }

出力スッキリ！

@mediaみたいにブロック作らせるとかセレクタで明示できたりとかだとわかりやすそうかなーとか妄想していたんだけど、ルール内に書く形で実装されている。実装の都合っぽい気がするなぁ……。違和感を感じる人はかなり多そうな気がするので、きっとこのままでは実装されないんじゃないかと思う。ブロック内に書かれた一文でそのブロックの挙動が変わるのはちょっと気持ち悪い。

%column {
  margin-right: ($gap / 2);
  margin-left: ($gap /2);
  float: left;
}