![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
SCSSが使えるようになりコーディング速度、保守性が爆上がりした件についてテンションが上がっている私ですが前回は主にメリットについて述べて参りました。
後編では実際の書き方や導入方法についてご紹介していきたいと思います。
まずはファイルを作りましょう。
前編でもあったようにSASSとSCSSではすこし記述方法が違います。
SASS記法はセミコロンや波括弧を使用しないのでコードが簡略化され、負担は少なくなりますがコードが読みづらくなるというデメリットがあります。
ファイル名の後に.sassを付けることによりSASS記法での記述が可能です。
一方SCSS記法は書き方がCSSに似ておりCSSを触れる方ならあまり学習コストがかからないというメリットがあります。
ファイル名の後に.scssを付けることによりSCSS記法での記述が可能です。
さてSCSSの入れ子とはどういう物か?実際にコードで確認してみましょう
<div class="wrapper">
<div class="content1">
<h2 class="content1__h2">
content1のh2です
</h2>
<p classs="content1__p">
content1のpです
</p>
</div>
<div class="content2">
<h2 class="content2__h2">
content2のh2です
</h2>
<p classs="content2__p">
content1のpです
</p>
</div>
</div>
.wrapper {
margin: 0 auto;
}
.wrapper .content1 {
background: red;
}
.wrapper .content1__h2 {
font-size: 20px;
}
.wrapper .content1__p {
font-size: 16px;
}
.wrapper .content2 {
background: blue;
}
.wrapper .content2__h2 {
font-size: 24px;
}
.wrapper .content2__p {
font-size: 18px;
}
上記のようなHTMLとCSSがあるとします。
問題なのはCSSの.wrapper .conetnt1等同じコードを何回も書いているので
これが膨大なCSSの量になってくると圧倒的に見通しが悪くなりますし気づいたら他にも同じスタイルを当てていて一ヵ所を変更すると他のスタイルにも影響してしまう原因にもなります。
上記のCSSをSCSSに直したのが下記のコードです。
.wrapper {
margin: 0 auto;
.content1 {
background: red;
&__h2 {
font-size: 20px;
}
&__p {
font-size: 16px;
}
}
.content2 {
background: blue;
&__h2 {
font-size: 24px;
}
&__p {
font-size: 18px;
}
}
}
慣れない内は少し癖があるかと思いますが
重要な点は入れ子にすることにより勝手に親のクラスが当たったCSSが出力されるという点です。
これにより重複防止の為に長いクラス名を書かなくてもよいですしクラス名をチェーンさせても全てのクラスを書かなくていいので圧倒的にタイピング量が少なくなりコーディング速度が爆速になるということですね。
もう一点は&を使っているということ
&を使うことにより
.hoge {
margin: 0 auto;
}
.hoge__hogehoge {
background: red;
}
のようなコードを
.hoge {
margin: 0 auto;
&__hogehoge {
background: red;
}
}
にすることにより毎回親クラスの.hogeを記述しなくて済むということになります。
そして上記のコードを見てもらうとBEM記法との相性も抜群なのですね!
というようにメリット1だけでもSCSSを使わない手はないぐらいに目白押しでした。
後編第2弾では変数の利用方法をお届けいたします。
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?