陽炎空華

SassScript

$var:10px 0;

h1 {
	margin:$var;
}

h1 {
  margin: 10px 0;
}

• 数値　　：例えば 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（※スペースまたはカンマで区切ります）

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

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

.length1 {
  content: 6;
}

.length2 {
  content: 3;
}

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

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

.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;
}

.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;
}

CSS 拡張機能

#main {
	width:240px;
	p {
		text-indent:1em;
	}
}

#main {
  width: 240px;
}
#main p {
  text-indent: 1em;
}

a {
	font-weight:bold;
	text-decoration:none;
	&:hover {
		text-decoration:underline;
	}
	div & {
		font-weight:normal;
	}
}

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
div a {
  font-weight: normal;
}

p {
	font: {
		family:"メイリオ", Meiryo, sans-serif;
		size:30em;
		weight:bold;
	}
}

p {
  font-family: "メイリオ", Meiryo, sans-serif;
  font-size: 30em;
  font-weight: bold;
}

コメント

/* このコメントは、複数行あります。
 * このコメントは、CSSのコメント構文を使用しているので、
 * コンパイル後のCSSにそのまま出力されます。 */
body {
	margin:auto 0;
}

//このコメントは、それぞれ１行の長さです。
//このコメントは、一行コメントの構文を使用しているので、
//コンパイル後のCSSには出力されません。
p {
	color:#000;
}

/* このコメントは、複数行あります。
 * このコメントは、CSSのコメント構文を使用しているので、
 * コンパイル後のCSSにそのまま出力されます。 */
body {
  margin: auto 0;
}

p {
  color: #000;
}