コーディング

SCSSの基礎

投稿日:2019年8月18日 更新日:

今回は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で書くようになってから、スピードがかなりアップしたと感じていますし、コンテンツ追加が発生した時にも修正箇所を見つけやすくなりました。
結果的にミスも減りました。

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

ではまた!

-コーディング

執筆者:

関連記事

勉強

プログラミング初心者の独学の方法、おすすめ教材

完全初心者からWebチーム内で戦えるようになった方法について書きます。

CSS

【CSS】 first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。<後編>

今回はセレクタ解説の後編です。first-child,last-child,nth-of-type,,,などなど

CSS

【CSS】outlineの特徴まとめ 〜borderとの違いまで〜

outlineとborderの違いについて書きました。今まではborderしか使っていなかったのですが、outlineの特徴を知れば、コーディングでできることの幅が広がります。脱初心者を目指して。

【初心者→中上級者になる】Progateをやり終えた後にオススメ2選のUdemy

プログラミングを独学からスタートし約3年間が過ぎたのでその成長ログを書こうと思います。

CSS

【CSS】文字を下線(アンダーライン)で目立たせる。コピペOK。

CSSでテキストにアンダーラインを引く方法をいくつか紹介します。普通の下線、太線、マーカー風の下線まで表現できる実装をまとめました。ブログやLP制作で、ユーザーの目線を奪うことは重要です。それにはテキストを際立たせる必要になる時があります。そんな時の為にアンダーラインの理解を深めましょう。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。