Sass Tutorial - 3: Variables

概要

原文

Sass allows you to declare variables that can be used throughout your stylesheet. Variables begin with $ and are declared just like properties. They can have any value that's allowed for a CSS property, such as colors, numbers (with units), or text.

超意訳

Sassはスタイルシート中で使われる変数を定義可能です。変数は$で始まり、プロパティのように定義します。変数は、色、数値(単位付き)、テキストのようなCSSプロパティとして使用可能な値であれば、どんな値でも取ることができます。

サンプル

scssファイル

/* style.scss */

$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}

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

/* style.scss */
#navbar {
  border-bottom-color: #ce4dd6;
  border-bottom-style: solid; }

a {
  color: #ce4dd6; }
  a:hover {
    border-bottom: solid 1px; }

続き

原文

Variables allow you to re-use colors, sizes, and other values without repeating yourself. This means that changes that should be small, such as tweaking the coloring or the sizing, can be done in one place, not all over the stylesheet.

超意訳

変数を使うことで、色、サイズ、その他の値を繰り返し書くことなく、再利用することが出来ます。色やサイズの調整を、スタイルシート全体の変更ではなく、一箇所の変更で出来るようにし、変更を最小限にすべきということです。

---

＜ Sass Tutorial - 2: Parent References | Sassの記事一覧 | Sass Tutorial - 4: Operation and Functions ＞