陽炎空華

■参考URL
File: SASS_REFERENCE

SassScript

■参考URL
File: SASS_REFERENCE | SassScript

■変数 : $
参考URL
File: SASS_REFERENCE | Variables: $
Sass(Scss) Memo: 変数 | Culture27:
変数はドル記号で始まり、CSSプロパティのように設定されています。
変数はそれが定義されている{}内でのみ利用可能です。
{}の外で定義されている場合は、どこでも利用可能です。

$var:10px 0;

h1 {
	margin:$var;
}

h1 {
  margin: 10px 0;
}

■データタイプ
参考URL
File: SASS_REFERENCE | Data Types
SassScript は以下のデータタイプをサポートしています。

• 数値　　：例えば 1.2, 13, 10px（※整数、浮動小数点、単位）
• 文字列　：例えば "foo", 'bar', baz（※引用符有無）
• カラー値：例えば blue, #04a3f9, rgba(255, 0, 0, 0.5)（※カラー文字列、16進数、カラー関数）
• 真偽値　：例えば true, false
• リスト　：例えば 1.5em 1em 0 2em, Helvetica, Arial, sans-serif（※スペースまたはカンマで区切ります）

○リスト関数
参考URL
List Functions
・length($list)
・nth($list, $n)
・join($list1, $list2, [$separator])
・append(list, val, separator:auto)

$list:Helvetica, Arial, Georgia, "Times New Roman", Times, sans-serif;
$list1:10px 20px 30px;
$list2:40px, 50px;
$val:60px;

・length($list)
リストの長さを返します。

.length1 {
	content:length($list);
}
.length2 {
	content:length($list1);
}

.length1 {
  content: 6;
}

.length2 {
  content: 3;
}

・nth($list, $n)
n番目の項目をリストから取得します。

.nth1 {
	content:nth($list,5);
}
.nth2 {
	content:nth($list,1);
}

.nth1 {
  content: Times;
}
.nth2 {
  content: Helvetica;
}

・join($list1, $list2, [$separator])
２つのリストを結合します。

.join1 {
	content:join($list1,$list2);
}
.join2 {
	content:join($list2,$list1);
}
.join3 {
	content:join($list1,$list2,space);
}
.join4 {
	content:join($list1,$list2,comma);
}

.join1 {
  content: 10px 20px 30px 40px 50px;
}

.join2 {
  content: 40px, 50px, 10px, 20px, 30px;
}

.join3 {
  content: 10px 20px 30px 40px 50px;
}

.join4 {
  content: 10px, 20px, 30px, 40px, 50px;
}

・append(list, val, separator:auto)
単一の項目をリストの末尾に追加します。

.append1 {
	content:append($list1, $val);
}
.append2 {
	content:append($list2, $val);
}
.append3 {
	content:append($list2, $val, space);
}
.append4 {
	content:append($list2, $val, comma);
}

.append1 {
  content: 10px 20px 30px 60px;
}

.append2 {
  content: 40px, 50px, 60px;
}

.append3 {
  content: 40px 50px 60px;
}

.append4 {
  content: 40px, 50px, 60px;
}