【効率爆上げ】CSSの記述に役立つScssの導入方法と便利な機能３選【具体例あり】

はじめに

この記事は、僕のポートフォリオ作成の実体験を元に、これからポートフォリオを制作する人へ向けた、参考記事になります。

前回の記事はこちらになります。
⬇️【超簡単！】Adobe XDでポートフォリオのデザインを作成！【具体例あり】
https://qiita.com/yuki4839/items/4a97c3a2a3d7f8037520

さて今回はポートフォリオのデザインが完成し、いよいよコーディングに移ると言うところで、超便利にCSSのスタイル記述ができる、Scss(Sass)について解説しようと思います。

結論、Scssで使用するのは3つの便利機能になります。

Scssとは

簡単に言うと、「CSSであれば便利だな〜」と言う機能を、ふんだんに盛り込んだ、ライブラリのようなものです。

拡張子には、.scss と言う形で書いていきます。

Scssを使用する準備

Scssはそのまま読み込む事ができません。そのため、通常であればCSSにコンパイラを行う環境が必要です。

ただし、VScodeエディタ でScssを使用する場合は、初心者でも簡単にプラグインの導入のみで、CSSへのコンパイラ環境が整いますので、ここではSassをコンパイラするのによく利用される、VScodeのプラグインを紹介します。

Easy sass

こちらは筆者も実際に利用している、Scssのコンパイラを行うプラグインになります。インストールして有効化を行うだけで、拡張子.scss のファイルが、自動的に 拡張子.css と 拡張子.min.css にコンパイラされていきます。

しかもScssを記述しながら、コンパイラしてくれるので、実際の描画画面を確認しながらScssを記述する事もできます。

Live Sass Compiler

もう一つ有名なSassコンパイラ用のプラグインがこちらです。上記のEasy Sassと同じように編集しながらライブでコンパイラを行ってくれます。

ただ、こちらはある程度設定が必要になりますので、特に理由が無い限り最初は、Easy sassを利用される事を、オススメします。

Scssでよく使う便利機能３選

ではここからは、実際のコードを例に出して、Scssで利用する事が多い便利な機能を3つ、ご紹介させていただこうと思います。

入れ子構造

ScssはCSSではできなかった、入れ子構造をとる事ができます。文章では伝わりにくいと思うので、実際のコードはこちら。

.header {
  background-color: #fff;
}

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  .logo-container {
    width: 10em;
  }

  .company-name {
    font-size: 20px;
    color: $font-color;
  }
}

.header-right-lists {
  display: flex;

  .header-right-list {
    margin-left: 30px;
    font-weight: bold;
  }
}

これは僕が実際にポートフォリオの作成で利用した 拡張子.scss の中身の一部です。.header-left の中で、.logo-container と .company-name が入れ子になっているのが確認できると思います。(.header-right-lists の中に .header-right-list が入れ子になっているのも)

これができることによって、class属性 を何度も書く必要がなくなり、作業効率が劇的に向上します。

ちなみにこれを 拡張子.css にコンパイラした結果がこちらです。

.header {
  background-color: #fff;
}

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-left .logo-container {
  width: 10em;
}

.header-left .company-name {
  font-size: 20px;
  color: #2F2F2F;
}

.header-right-lists {
  display: flex;
}

.header-right-lists .header-right-list {
  margin-left: 30px;
  font-weight: bold;
}

拡張子.css の方では、ちゃんと class属性 が記述されているのが、確認できると思います。

変数宣言

次にCSSでは、変数の宣言をする事ができませんでしたが、Scssの方では、変数を宣言する事ができます。

変数の設定には、いくつか種類があるのですが、最も簡単に設定する方法は、下記のような書き方になります。

$font-color: #2F2F2F;

これで、$font-color と言う変数が宣言できました。

実は先ほど出した見本にも、こちらの変数が使われていました。

.header-left {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  .logo-container {
    width: 10em;
  }

  .company-name {
    font-size: 20px;
    color: $font-color;
  }
}

.company-name の colorプロパティ に $font-color と言う変数が利用されています。これは先ほど紹介したように、予め変数の設定を行っていたので、$font-color とは #2F2F2F と言う意味になります。

そのため、CSSにコンパイラを行うと、以下のようになります。

.header-left {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-left .logo-container {
  width: 10em;
}

.header-left .company-name {
  font-size: 20px;
  color: #2F2F2F;
}

.company-name の colorプロパティ が #2F2F2F になっているのが確認できると思います。

変数を利用するメリット

一番は保守性が上がることになります。

例えば通常のCSSだと、同じカラーコードを多数の箇所に使用すると、もし変更が掛かった時に、一つづつ修正することになります。これでは保守性が悪いです。そこでScssの変数を利用すれば、同じ変数を多数の箇所に使用したとしても、変更が会った際も変数宣言を行った一箇所のみの修正で済むので、保守性が高いと言えます。

そのため、入れ子構造と並んで、よく利用されるScssの便利機能になります。

ブレイクポイント(@mixin、@include)

最後はブレイクポイントが簡単に設定できる、Scssの @mixin と @include についてです。まず最初にCSSでブレイクポイントを設定する場合は、以下のようになります。

@media screen and (max-width: 767px) {
  .account-edit-row input {
    width: 100%;
  }
  .
  .
  .

}

このように、通常のスタイルとは別に、ブレイクポイントの設定を記述するスペースが必要になります。しかし、これでは行数が長くなった時に、何度も通常時に当たっているスタイルを確認して、ブレイクポイントの記述をする必要がでてき、少々面倒です。

しかし、Scssを利用すれば入れ子構造と @mixin @include を利用して、通常のスタイルの直下にブレイクポイントの設定を記述する事ができます。

文章では説明しにくいので、まずはコードをご覧ください。

// ブレイクポイントの設定
$breakpoints: (
  'sm': 'screen and (max-width: 767px)',
  'md': 'screen and (min-width: 768px)'
) !default;
// ↑コピペOKです

// デフォルトのブレイクポイントを設定
@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}
// ↑コピペOKです


.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: content-box;

  @include mq(sm) {
    padding: 0 10px;
  }
}

.user-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: content-box;

  @include mq(sm) {
    padding: 0 10px;
  }
}

まずは $breakpoints を利用して、任意のブレイクポイントを決めます。そして @mixin を利用して、任意のブレイクポイントをデフォルト設定にします。(コピペ利用OKなので、細かい説明は省きます。)そして .container のように、入れ子構造で @include を利用して、mq(メディアクエリ) の引数に @mixin で設定したエイリアス(今回ならsmでmax-width: 767px)を選択。

これで、@include の中のスタイルは、エイリアス(今回ならsmでmax-width: 767px)のブレイクポイント内で適用されるスタイルを記述できるようになります。

上記の設定を 拡張子.css で確認すると、下記のようになります。

.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: content-box;
}

@media screen and (max-width: 767px) {
  .container {
    padding: 0 10px;
  }
}

.user-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: content-box;
}

@media screen and (max-width: 767px) {
  .user-container {
    padding: 0 10px;
  }
}

このように、Scssではブレイクポイントごとの記述が簡単に行う事ができ、作業効率が向上が見込めるので、オススメです。

まとめ

少し長くなってしまいましたので、最後にまとめておきます。

• Scssについて
  • CSSに便利な機能を追加したライブラリのようなもの
• Scssの使用準備(VScode)
  • Easy sass
  • Live Sass Compiler
• Scssの便利機能
  • 入れ子構造
  • 変数宣言
  • ブレイクポイント(@mixin、@include)

恐らく企業でも、CSSではなくScssを利用しているところが多いと思いますので、使えるようになって損は無いと思います。

導入も簡単で、上記３つの機能だけでも、かなり作業効率が上がりますので、ぜひポートフォリオ作成時などに使ってみてください。

最後まで読んでいただき、ありがとうございました！

筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack