(翻訳) Sassの@contentのユースケース

この記事は、2014/04/22にChristian Reuter氏によって、書かれた記事です。
本人の許可を頂いて翻訳しています。
直訳が難しい所が結構あったので、意訳しています。

[原文 - http://robots.thoughtbot.com/sasss-content-directive]

Sass 3.2からミックスインにContentブロックを渡せる@contentが追加されています。

@mixin apply-to-ie6-only {
  * html {
    @content
  }
}

@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

生成後

* html #logo {
    background-image: url(/logo.gif);
}

外側のスコープのセレクターに対してどこにでも記述できます。

Media Queries

デバイス毎にファイルをわけてメンテナンスしなくても、メディアクエリーを書けますが、 何度も繰り返し記述するのもやっかいです。 Contentブロックをメディアクエリーに渡す事でシンプルに出来ます。

@mixin media($width) {
  @media only screen and (max-width: $width) {
    @content;
  }
}

@include media(320px) {
  background: red;
}

生成後

@media only screen and (max-width: 320px) {
  background: red;
}

これは、Bourbonで使われているHiDPI mixinの様に長く細かく設定されたメディアクエリーに対して特に効果的です。

詳しくは、私達のNeatで使っているMixinでご覧頂けます。

Keyframes

Keyframesは重複のよい例です。ベンダー毎に記述するかわりにMixinに出来ます。

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

@include keyframes(fadeIn) {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

生成後

@-webkit-keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

コンテキストによる振り分け

これもBurbonで使用されています。

親のクラスによって、スタイルを振り分けるための賢いMixinをReda Lemedenさんのプロジェクトから紹介します。

状態管理用の.component--modifiersやクラスを繋げていく変わりに、親のクラスを定義しておくことで分離する事ができます。

@mixin create-context($classes...) {
  @each $class in $classes {
    .#{$class} & {
      @content;
  }
}

@mixin context--alternate-template {
  @include create-context(about, blog) {
    @content
  }
}

.header {
  height: 12em;
  background: red;

  @include context--alternate-template {
    background: green;
  }
}

生成後

.header {
    height: 12em;
    background: red;
}

.about .header {
    background: green;
}

.blog .header {
    background: green;
}

BEMの簡略化

SASS 3.3から@at-rootが追加され&が改善されています。
@at-rootはネストした記述をコンパイル時にCSSのルートに移動します。
&はそれに文字列を続けて記述できるようになりました。

これらは@contentを利用することによってBEM記法を簡略化出来ます。ありがとうScott Kellumさん

@mixin element($name) {
  @at-root #{&}__#{$name} {
    @content;
  }
}

@mixin modifier($name) {
  @at-root #{&}--#{$name} {
    @content;
  }
}

.block {
  color: red;

  @include element(element) {
    color: green;

    @include modifier(modifier) {
      color: blue;
    }
  }
}

生成後

.block {
  color: red;
}

.block__element {
  color: green;
}

.block__element--modifier {
  color: blue;
}

まとめ

@contentSCSSの重複を減らすSassの機能の一つに過ぎません。もっとクリエイティブに構成と開発を考えてみましょう。 詳しくはSass directives documentation

comments powered by Disqus
Older »