SCSSの書き方

今回はSCSSの書き方です｡もっとも初歩ですね｡個人的には､これだけでも抑えていたら､問題ないと思います｡

HTMLはBEM記法で書いていますので､紹介します｡

こんな感じで

まずは完成形です｡

leftとsideに色を付けています｡これをHTMLで書くと､こうなります｡SCSSはまだ解説していませんので､このあと､紹介します｡

<div class="box">

<div class="box__left">
<p>left</p>
</div>

<div class="box__side">
<p>サイドバー</p>
</div>

</div>

全体をboxで囲み､その中にある､leftとsideがあります｡leftやsideの前に｢box__｣を付けます｡下線は2つなので､注意です｡クラス名は任意です｡好きな名前にしましょう｡

SCSS

SCSSは以下になります｡

.box{

display: flex;
gap: 1rem;

&__left{
background: red;
}

&__side{
background: green;
}

}

boxの{}の中に､leftとsideを入れます｡&__のあとに､leftやsideを書きます｡下線は2つです｡

これは､boxの中にある､leftとsideになります｡

これをCSSで書くと､こうなります｡

CSS

.box {
  display: flex;
  gap: 1rem;
}
.box__left {
  background: red;
}
.box__side {
  background: green;
}

cssの場合､いちいちboxを書かないといけません｡ただ､この程度であれば､SCSSでなくてもいいでしょう｡ただ､時代はSCSSの為､CSSを理解した人は､SCSSを学ぶといいですね｡

さいごに

SCSSとBEM記法は相性がいいと思います｡他にも色々とありますが､基本はこうなります｡あくまで､僕の中では｡当サイトはBEM記法とSCSSで作っております｡

ただ､SCSSは最終的にコンパイルする必要があります｡コンパイルできる､ソフトを使いましょう｡例えば､vscodeであれば､プラグインで可能です｡時間がある人は､お試しあれ｡