【SASS入門】実用例で紹介する@contentの使い方

【SASS入門】実用例で紹介する@contentの使い方

今回はSASSで使える@contentの使い方と便利な活用方法を紹介します。

ぶっちゃけ、@contentは頻出ではないです。
ただ、覚えておくと爆速にコーディングが捗るので覚えておくとメリット大です!

mixinファイルを別サイトでも流用したい場合は、必須レベルになってきます。
ぜひ活用できるようにしたいですね。

とりあえず記述方法

// style.scss
@mixin text_link() {
  font-size: 14px;
  color: blue;
  @content;
}

.text-link {
  @include text_link() {
    &:hover {
      text-decoration: underline;
    }
  }
}

@contentはmixinで使うことが出来ます。
mixinがイマイチ分からない方はmixinを紹介してるサイトを読んだほうが理解が早いです。
SASSで使えるmixinの解説と爆速コーディングのためのテクニックを紹介!

mixinの定義の中に@contentを忍ばせておくと、mixinを呼び出す時にスタイルを追加することが出来ます。
スタイルを追加するときは、@include入れ子の中に定義してあげます。

今回の例だと、text_link()に対して、@contentを忍ばせています。

// style.scss
@mixin text_link() {
  font-size: 14px;
  color: blue;
  @content;
}

そして、mixinをincludeするときに、
&:hover()
text-decoration: underline;
を定義しています。

// style.scss
.text-link {
  @include text_link() {
    &:hover {
      text-decoration: underline;
    }
  }
}

これをコンパイルすると以下のようになります。

// style.css
.text-link {
  font-size: 14px;
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

@contentを使うメリット

さて、@contentを使うと、どんなメリットがあるのかを紹介していきましょう!
ざっと、挙げるとこんな感じになります。

  • 基本的にメディアクエリで使えばOK!
  • 予想できないスタイルを個別に当てることができる

基本的にメディアクエリで使えばOK!

@contentはメディアクエリで使う

もう、今日はこれだけ覚えてもらえればOKレベルです(笑)
実務でもメディアクエリ以外に使うことは滅多にないですね。

例えば、textクラスを作って、
デバイス幅768px以下の場合はfont-size: 14px;
デバイス幅769px以上の場合はfont-size: 16px;
にしてみます。

// style.scss
@mixin device_pc() {
  @media screen and (max-width: 768px) {
    @content;
  }
}

.text {
  font-size: 14px;
  @include device_pc() {
    font-size: 16px;
  }
}

これをCSSに変換すると、

// style.css
.text {
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .text {
    font-size: 14px;
  }
}

こんな感じになります。

レスポンシブが当たり前になっている現代では、メディアクエリはいろんなところで使います。
@mixinと@contentを使って定義しておけば、

あれー?メディアクエリのmax-widthって何ピクセルだっけか???

なんて事もなくなると思います!
あと、メディアクエリの記述って結構、分かりにくいですよねw

@media screen and (max-width: 768px)

この記述が、

device_pc()

こんな感じで記述量が短くなるのも嬉しいですね♪

予想できないスタイルを個別に当てることができる

ここからは、割と応用的な話になってきます。
話の前提としては、いくつものサイトを手掛けているとしますね。

SASSを使って、いくつもサイトを作っていると、

よく使うmixinを1つのファイルにしておけば、いろんなサイトで流用できるくね?

と思う人も多いはず。
そうなると、必然的に汎用的に使えるmixinを作る必要があります

@contentを使うことで、mixinを汎用的にすることが出来ます!

具体例を見ていきましょう。

// style.scss
@mixin text_link() {
  font-size: 14px;
  color: blue;
  @content;
}

.text-link {
  @include text_link() {
    &:hover {
      text-decoration: underline;
    }
  }
}

冒頭で紹介したコードと同じですねw

テキストリンクは、サイトによってマウスオンした際の挙動が変わると思います。
例えば、
・マウスオンをするとアンダーラインが表示される
・マウスオンをすると色が薄くなる

などなど。

これをmixinだけで対応しようとすると、

text_link_hover_underline()
text_link_hover_lighten()

みたいな感じで複数のmixinを作る必要もあります。
しかも、名前も長くなってしまい、とても見辛いですね・・・。

そんな場合に、@contentを使えば、mixinを1つ用意すればいいだけ。
とても分かりやすく、楽になりますね!