Sass：extendでCSSグラデーションを共用

Sassのextendを使って、グラデーション設定を使いまわしましょう。

Sass

$experimental-support-for-svg: true;
.gradient {
  @include background-image(linear-gradient(top, #fff, #ccc));
  @include filter-gradient(#fff, #ccc, vertical);
}
.box1 {
  @extend .gradient;
  width: 100px;
}
.box2 {
  @extend .gradient;
  width: 300px;
}

「.gradient」という汎用クラスを定義し、その後それらをextendしています。

ちなみに1行目の宣言でsvgサポートを有効にしています。
これによりグラデーションを画像出力して多少古いIEでも表示されるようにすることが狙いです。

出力されるCSS

.gradient, .box1, .box2 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
  background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
  background-image: -o-linear-gradient(top, #ffffff, #cccccc);
  background-image: linear-gradient(top, #ffffff, #cccccc);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFCCCCCC');
}

.box1 {
  width: 100px;
}

.box2 {
  width: 300px;
}

svgサポートを有効にした結果、グラデーションのData-URI画像も出力される形になり、長大なコードが出力されますが、これがクラスごとに入るのはたまったものではないと思います。

extendを使い「.gradient」のセレクタに「.box1」と「.box2」が追加される形になるため、グラデーション設定の記述量が大幅に減ることになります。