SCSSの基礎 | 未経験からエンジニア、そして採用担当のブログ

SCSSの基礎

投稿日：2019年8月18日更新日：2020年8月1日

今回はSCSSについてまとめてみます。

CSSを学び始めた頃は、素？のCSSでしか記述していませんでした。
同僚から、Sass（SCSS）で書いた方が描きやすいよー。と聞き、実際やってみると。。。

いい！書きやすいし、見え感もスッキリ！

おそらく現役フロントエンドエンジニアで素のCSSで書いてる人はいないのでは？（違ったらすいません）少なくとも私の職場ではSCSSの記述は当たり前でした。
では本題に入っていきます。

SCSSとはSassの記法の一つ

結論でいうと、SCSSはSassの記法の一つです。

皆さんは「サス」という単語を聞いたことがあるかと思います。
ググると「Sass」と出てくると思います。

Sassには記法が2つあります。「SASS」記法と、「SCSS」記法の2種類です。
それぞれ記法（コーディングの書き方）が違うので注意が必要です。

SCSS主流と聞いたことがあるので、自分はSCSSで書いています。（今回はSCSSについて書きます。SASSについてはググってみてください）

基本は入れ子で記述

これが普通のCSSに比べてわかりやすい＆スピードアップにポイントです。
ソースで見てみましょう。

<div class=“test”>
	<p>こんにちは</p>
</div>

これに下記のようなCSSを書くとします。

// ↓↓素のCSS↓↓
.test{
 width: 1000px;
}
.test p{
 color: red;
}

上記のCSSの内容をSCSSで書くとすると下記になります。

// ↓↓SCSSで記載↓↓
.test {
  width: 1000px;
  p{
    color: red;
  }
}

通常のCSSでは、子要素に対してCSSをあてるためには、毎回親要素の「.test」をつけないといけません。

今回のsmple.htmlのように子要素が一つだけであればいいのですが、もっと複雑になっていくとどうでしょう？

書く量も多くなるし、書く場所も悩みますし、、、色々めんどくさいですよね汗

同階層の複数クラスを扱う時

↑わかりにくいですよね。汗
コードで説明します。

<div class=“test test02”> //　同階層に複数クラスがある
	<p>こんにちは</p>
</div>

<div class=“test test02”>に対してCSSを当てるためにはSCSSでは下記のように書きます。

.test {
  width: 1000px;
 &.test02{　　　　　　//「＆」をつけてそのあとに続けます
    margin: 0 auto;
  p{
    color: red;
 }

こうすることでCSSでは、

.test{
 width: 1000px;
}
.test.test02{　　　　// ←いつものスペースなし
margin: 0 auto;
}
.test p{
 color: red;
}

となります。

擬似要素と擬似クラスの書き方。

早速書いてみましょう。

.test {
  width: 1000px;
  p{
    color: red;
　  ＆:hover｛
	 color: blue;
    }
    ＆:before｛
	 content: '';
    }
}

基本的に変わりませんね。「＆」を使います。
これがCSSでは…

.test{
 width: 1000px;
}
.test p{
 color: red;
}
.test p:hover{
 color: blue;
}
.test p:before{
 content: '';
}

いかがでしたでしょうか？
私はSCSSで書くようになってから、スピードがかなりアップしたと感じていますし、コンテンツ追加が発生した時にも修正箇所を見つけやすくなりました。
結果的にミスも減りました。

自分もすぐ慣れることができるので、まだ歴の浅いコーダーさんも挑戦してみてください！

ではまた！