File: SASS_REFERENCE
SassScript
■参考URLFile: SASS_REFERENCE | SassScript
■変数 : $
参考URL
File: SASS_REFERENCE | Variables: $
Sass(Scss) Memo: 変数 | Culture27:
変数はドル記号で始まり、CSSプロパティのように設定されています。
変数はそれが定義されている{}内でのみ利用可能です。
{}の外で定義されている場合は、どこでも利用可能です。
scss
$var:10px 0;
h1 {
margin:$var;
}
css
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)
scss（以下共通）
$list:Helvetica, Arial, Georgia, "Times New Roman", Times, sans-serif;
$list1:10px 20px 30px;
$list2:40px, 50px;
$val:60px;
・length($list)
リストの長さを返します。
scss
.length1 {
content:length($list);
}
.length2 {
content:length($list1);
}css
.length1 {
content: 6;
}
.length2 {
content: 3;
}・nth($list, $n)
n番目の項目をリストから取得します。
scss
.nth1 {
content:nth($list,5);
}
.nth2 {
content:nth($list,1);
}css
.nth1 {
content: Times;
}
.nth2 {
content: Helvetica;
}・join($list1, $list2, [$separator])
２つのリストを結合します。
scss
.join1 {
content:join($list1,$list2);
}
.join2 {
content:join($list2,$list1);
}
.join3 {
content:join($list1,$list2,space);
}
.join4 {
content:join($list1,$list2,comma);
}css
.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)
単一の項目をリストの末尾に追加します
scss
.append1 {
content:append($list1, $val);
}
.append2 {
content:append($list2, $val);
}
.append3 {
content:append($list2, $val, space);
}
.append4 {
content:append($list2, $val, comma);
}css
.append1 {
content: 10px 20px 30px 60px;
}
.append2 {
content: 40px, 50px, 60px;
}
.append3 {
content: 40px 50px 60px;
}
.append4 {
content: 40px, 50px, 60px;
}