■参考URL
File: SASS_REFERENCE
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 - CSS HappyLife:


CSS 拡張機能

■参考URL
File: SASS_REFERENCE | CSS Extensions

■ネストされたルール
参考URL
File: SASS_REFERENCE | Nested Rules
scss
#main {
	width:240px;
	p {
		text-indent:1em;
	}
}

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


■親のセレクタを参照する : &
参考URL
File: SASS_REFERENCE | Referencing Parent Selectors: &
Sass(Scss) Memo: 親セレクタの参照 | Culture27:
scss
a {
	font-weight:bold;
	text-decoration:none;
	&:hover {
		text-decoration:underline;
	}
	div & {
		font-weight:normal;
	}
}

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


■ネストされたプロパティ
参考URL
File: SASS_REFERENCE | Nested Properties
scss
p {
	font: {
		family:"メイリオ", Meiryo, sans-serif;
		size:30em;
		weight:bold;
	}
}

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


コメント

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

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

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

p {
  color: #000;
}