はじめに
SCSSはCSSの可読性や保守性を向上させたスクリプト言語です。
SCSSを記載するには事前準備が必要になります。
文法
入れ子構造
CSS
header {
color: white;
}
header div {
float: left;
}
header div p {
font-size: 20px;
}
SCSS
header {
color: white;
div {
float: left;
p {
font-size: 20px;
}
}
}
入れ子構造（セレクタ）
イベントは親子関係ではないですが、入れ子構造 + 「&」で記述することができます。
CSS
p {
color: white;
}
p:hover {
background-color: white;
}
SCSS
p {
color: white;
&hover {
background-color: white;
}
}入れ子構造（クラス指定）
CSS
クラス名によって対象を絞り込む場合は「．クラス名」をタグ名(p)の後ろに付けます。
<p> あれそれ </p>
<p class="target"> わっしょい </p>
<p> あれそれ </p>p {
color: white;
}
p.target {
background-color: white;
}
SCSS
p {
color: white;
p.target {
background-color: white;
}
}変数
変数を利用することで、再利用性を高めることができます。
定義は「$変数名 = 値」で行います。
CSSは上から下へ読み込まれるため、変数定義は参照より前に行う必要があります。
CSS
p .sentents1 {
font-size: 14px;
}
p .sentents2 {
font-size: 14px
}
SCSS
$sentents-font-size: 14px;
p .sentents1 {
font-size: $sentents-font-size;
}
p .sentents2 {
font-size: $sentents-font-size;
}mixin
複数の定義を変数として定義することで再利用性を高めることができます。
また、mixinには引数を渡すこともでき、値を切り替えることも可能です。
CSS
p .sentents1 {
font-size: 14px;
color: white;
background-color: red;
}
p .sentents2 {
font-size: 14px;
color: white;
background-color: blue;
}
SCSS
@mixin sentents-font($bg-color) {
font-size: 14px;
color: white;
background-color:$bg-color
}
p .sentents1 {
@include sentents-font(red);
}
p .sentents2 {
@include sentents-font(blue);
}ファイル分割
「@import ファイル名」でSCSSファイルを読み込むことができます。
その際のファイル名は先頭に「_(アンダーバー)」を付ける必要があります。
$sentents-font-size: 16px;@import "_param.scss"
p .sentents1 {
font-size: $sentens-font-size;
}
p .sentents2 {
font-size: $sentens-font-size;
}SCSSとSASSの違い
- ゴールは「CSSの可読性や保守性を上げ、開発効率を向上させる。」ですが、記述方法に違いがあります。
- SASSは、ブロック「｛｝」やセミコロンが不要で、コード量は少なくなりますが、可読性が低下するというデメリットがあります。
- SASSよりSCSSのほうが利用ユーザーが多いらしいです。
header {
color: white;
div {
float: left;
p {
font-size: 20px;
}
}
}
header
color: white
div
float: left
p {
font-size: 20px