Help us understand the problem. What is going on with this article?

初めて触るSCSSのすすめ

More than 1 year has passed since last update.

大量にCSSを書いてるとファイルが肥大化しすぎて管理しづらくなってくる。
そんな時に超絶おすすめなSCSSの使い方やメリットを簡単に記載する。

SCSSって何?

公式:https://sass-lang.com/
簡単にいうとCSSの拡張版。CSSを効率的に書くための記法になる。
同じような拡張版でSaSSというものがある。
SaSSはRubyっぽい記法なのが特徴。元々はSaSSから始まったが、この記法がデザイナーから不評だったらしく
CSS3っぽく書けるSCSSが主流になっているらしい。

SCSSの使い方

cssと同様、スタイルファイルの拡張子に.scssをつける。
ただし、scssの拡張子のままではhtmlが読み込んでくれないため.scssのファイルをコンパイルしてやって.cssに変換する必要がある。

コンパイル方法

色々なやり方があるが、VScodeの拡張機能を使うと簡単なため今回はこの方法を記載する

拡張機能「Easy Sass」

公式:https://marketplace.visualstudio.com/items?itemName=spook.easysass
Easy Sassを使うと、ファイルを保存した時に自動でコンパイルが走ってくれる。
ただし複数のファイルをmainのファイルにimport(後述記載)してる場合、import先のファイルは変更後に自動でコンパイルされるがmainのファイルはコンパイルされないため、手動でコンパイルしてやる必要がある。
コマンドパレットから「Compile all SCSS/SASS files in the project」を打つと全てのファイルが一括でコンパイルできる。

出力ファイル

デフォルトの設定だとEasy SaSSからコンパイルされて出来上がるファイルは.css.min.cssの2ファイルになる。
.min.cssはcssファイルを圧縮したもので、普通の.cssファイルよりサイズが軽量になっている。
この.min.cssファイルを出力させないようにするには
基本設定 -> 設定 -> 拡張機能 -> EasySass configuration -> Formats で

settings.json
    "easysass.formats": [
        {
          "format": "expanded",
          "extension": ".css"
        }
      ]

を入力してやれば良い

SCSSの便利な機能

色々あるが、よく使いそうな機能をいくつか紹介する

変数宣言

SCSSは変数が使える。
サイトのベースになる設定を変数に宣言しておくと、後々変更が入った際など修正が楽になる

scss
$base_color:red;
$base_width: 300px;
$base_height: 300px;
$base_bg_color:blue;

.myCss {
  color: $base_color;
  width: $base_width;
  height:$base_height;
  background-color: $base_bg_color;
}

ネスト(入れ子)

SCSSはスタイルをネストで記載できる。
ネストで書くことによってファイルの肥大化を抑え、管理が容易になる。

例えば通常のCSSの場合

css
.myCss {
  font-size: 12px;
}

.myCss ul {
  list-style: none;
}

.myCss ul li {
  color: red;
}

と書くところを

scss
.myCss{
  font-size: 12px;

  ul{
    list-style: none;

    li{
      color:red;
    }
  }
}

と書ける

「&」で条件分岐

擬似クラスもネストで簡単に書ける。
直感的に書けるのでかなりわかりやすい。

scss
.myCss{
  color:red;

  &:hover{
    color:blue;
  }

  &:active{
    color:green;
  }
}

mixin

mixinは関数のようなもので、使い回すような設定をあらかじめ@mixinで定義しておき、@includeで呼び出すことができる。例えば変数と組み合わせると、メディアクエリの設定が簡単になったりする。

scss
// メディアを定義
$media: (
  "sp": "screen and (max-width: 767px)",
  "tab": "screen and (max-width: 1024px - 1px)",
  "pc": "screen and (min-width: 1024px)"
);

// mixinを定義
@mixin mq($breakpoint: sp) {

  @media #{map-get($media, $breakpoint)} {

    @content;
  }
}


// includeで呼び出し
.myCss{

  @include mq('pc'){
    color: red;
  }

  @include mq('tab'){
    color: blue;
  }

  @include mq('sp'){
    color: green;
  }

}

四則演算

CSSではcalc関数で四則演算ができるが、SCSSで関数を使わずに計算ができる。

scss
.myCss{
  width: (320 / 1200) * 100%;
  height: (200 / 480) * 100%;
  background-color: red;
}

外部ファイルの読み込み

SCSSでは設定ファイルをいくつかに分け、@importで読み込むことができる。
例えば役割ごとに設定ファイルを分けることで保守性が上がり、管理がしやすくなる。
また、読み込むファイルは先頭に「_」をつける。

(例)ディレクトリ構成
├── index.html
├── css
│   ├── style.scss
│   ├── var  // 変数定義
│   │     └──_var.scss
│   ├── mixin  // maxin定義
│   │     └──_mixin.scss
│   └── page  // スタイリング定義
│          ├──_header.scss
│          ├──_body.scss
│          └──_footer.scss

style.scssで読み込む。
変数やmixinはpageよりも先に読み込むのを注意。

scss
@import "var/**";
@import "mixin/**";
@import "page/**";

extend(継承)

extendは定義しているスタイルを継承することができる。

scss
.myCss{
  width: (320 / 1200) * 100%;
  height: (200 / 480) * 100%;
  background-color: red;
}

.myCss2{
  @extend .myCss;
}

こう書くと、myCss2クラスにmyCssクラスのスタイルが継承される。
ちなみに同名のプロパティを上書きした場合、上書きした内容が優先される。

scss
.myCss{
  width: (320 / 1200) * 100%;
  height: (200 / 480) * 100%;
  background-color: red;
}

.myCss2{
  @extend .myCss;
  background-color: blue;  // blueが優先される
}
infr_0329
webインフラエンジニア。フロントエンドの勉強始めました。新米パパです
https://github.com/yuto-miyazawa
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away