Sass Tutorial - 5: Interpolation

概要

原文

Variables can be used for more than just property values. You can use #{} to insert them into property names or selectors.

超意訳

変数は、ただのプロパティの値という枠を超えて使うことができます。#{}を使うことで、プロパティ名やセレクタに変数を挿入できます。

サンプル

scssファイル

/* style.scss */

$side: top;
$radius: 10px;

.rounded- {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

cssファイル (sassコマンドにより自動生成)

/* style.scss */
.rounded- {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

---

＜ Sass Tutorial - 4: Operations and Functions | Sassの記事一覧 | Sass Tutorial - 6: Mixins ＞