11d. ProgateでSassⅠ(備忘録)

Sass 学習コースⅠ(CSSをより便利に効果的に操作する言語)

・Sassとは
「Sass」はCSSをより便利かつ効率的に書くことができる言語です。ファイル拡張子は「.css」ではなく「.scss」です。

・Sassを使うメリット

  • CSSより記述量を減らせる
  • コードを再利用できる

・入れ子構造
Sassでは1つのセレクタの中に別のセレクタを入れ子にして指定することができます。

通常のCSS(stylesheet.css)

.header {
	width: 100%;
}
.header ul {			/* .headerを2回書かなければならない */
	padding: 10px;
}

Sassの場合(stylesheet.scss)

.header {
	width: 100%;

	ul {							/* .headerにあるulタグに対するCSS */
		padding: 10px;
	}
}