🦁
SCSSについて学んでみる
SCSSとは
「CSSのメタ言語」 メタ言語とは「ある言語について何らかの記述をするための言語」
つまりSCSSとは「CSSに対して機能を拡張した言語」ということ
SCSSとは、CSSを効率的に書くための書き方と覚えておけば大丈夫！！
SCSSのメリット
- 「ネスト（入れ子）」で記述量が減る
- 「変数」を使い一括で編集できる
- 「ミックスイン」・「継承」で使いまわし
- 「パーシャル」でファイル分割し分かりやすく
- 「四則演算」ができる
- if文などの「プログラミング」が出来る
今回は上から4つまでをメモしていきます
した2つについては説明の通りなので省略！
ネスト（入れ子）の利用について
index.html
<div class="content">
<p class="red">red</p>
<p class="blue">blue</p>
<p class="green">green</p>
</div>
のようなhtmlの実装だった際、cssでの記述だと下のようになる
style.css
.content {
font-size: 16px;
}
.content .red {
color: red;
}
.content .blue {
color: blue;
}
.content .green {
color: green;
}
だが、SCSSでの実装だと
style.scss
.content {
font-size: 24px;
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
}
のように「.content」の記述が一回で済み、見やすさ・分かりやすさが向上していると思う。
変数の利用について
複数の要素で使うモノに対して変数を使うとカスタマイズが楽になる
コード例：
style.scss
$main-color: red;
.content {
border: 1px solid $main-color;
.red {
color: $main-color;
}
}
$main-color: blue;などに変えることで一個ずつ変更をかける必要がなくなる
ミックスイン（mixin）の利用
「mixin」という機能を使うことによってコードの使いまわしが出来る
コード例
style.scss
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
.content {
@include flexCenter;
background-color: red;
}
cssにすると下のようになる
style.css
.content {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
mixinで「引数」の利用もできる
mixinでは引数を使って値を変更することもできる
コード例
scssでの記述
style.scss
@mixin flexCenter($weight, $style, $color) {
display: flex;
justify-content: center;
align-items: center;
border: $weight $style $color;
}
.content {
@include flexCenter(1px solid red);
}
cssに変換すると
style.css
.content {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
継承(extend)の利用
他の要素につかったcssのコードを1行で使いまわすことが出来る
コード例
scssの記述
style.scss
.text {
font-size: 24px;
color: red;
}
.sub-text {
@extend .text;
font-weight: bold;
}
cssに変換すると
style.css
.text {
font-size: 24px;
color: red;
}
.sub-text {
font-size: 24px;
color: red;
font-weight: bold;
}
パーシャルの利用
パーシャルファイルを細かく作成することで、分かりやすく編集しやすくなる
イメージとしては「色」「ボタン」「フォーム」などで複数ファイルを分ける感じ
cssに出力する際には「@import」で統合することが出来る
「@import」は廃止されるよう
@import は複数のファイルを読み込んだ際、デバッグが困難なため廃止されるみたい
@useを使用するといいらしい
コード例
style.scss
@import
"header",
"footer",
"color"
Discussion