本記事は、 North Detail Advent Calendar 2019 の7日目の記事です。

Qiita にて作成した記事からの転記となります。 (2019年12月7日公開)

https://qiita.com/surimi_pan/items/e398140ea1eef6d5030c

※本記事は、NorthDetail Advent Calendar 2019の一環として投稿しています

はじめに

こんにちは。
surimi_panと申します。

昨年までバックエンドエンジニアとして勤めていたのですが、
ある日を境にフロントエンドのコーダーに変身しました。
業務内容が変わったことで新しい用語や技術が次々入ってきて毎日が新発見とカルチャーショックの連続です。

今回はSassについてお話させていただきます。

序章

「CSSは.cssファイルを直接編集したことなら...」

前述の通り↑程度の知識だった当初の私がCSSに抱いていた印象といえば、

• 同じようなプロパティを複数の要素に記入する時は何度も書く
• 色を変えるときは関連箇所全て洗い出して変えないといけない
• ファイルの規模が大きくなるほどCSSファイルが長くなって編集が大変
• どの箇所を編集しているのか、gitで確認しにくい

...といったもので、
バックエンド時代に「変更に強いコードを」「共通箇所はまとめる」「変更箇所は少なく抑える」
と学んでいた私は、CSSに対して「変更に弱い」印象を抱くようになっていました。

そこでSassに出会ったわけですが...。

Sassとは

Sassとは、CSSの拡張メタ言語(言語を作成するためのの言語)のことです。

スタイルを記述する点においてはCSSと共通していますが、構文に違いがあり、
要素の入れ子や関数などのCSSには備わっていない機能を利用します。
そうして作成されたファイルをコンパイラに通すことによって、CSSファイルが生成されます。

Sassの構文には2種類の記法があり、インデントを利用する「SASS」記法と、
波括弧やセミコロンを利用してCSSに似た書き方ができる「SCSS」記法が利用できます。

.test
  display: flex
  align-items: center

  a
    color: #2b2b2b

.test {
  display: flex;
  align-items: center;

  a {
    color: #2b2b2b;
  }
}

↓ どちらも同じ内容のCSSが生成されます。

.test {
  display: flex;
  align-items: center;
}

.test a {
  color: #2b2b2b;
}

何に感動したか

Sassにはいろんな便利機能があるのですが、特に感動したのは以下の3つです。

1. 変数
2. mixin
3. ファイル分割

変数

文字や数値、色などを変数として保存することができます。

$main-color: #ccc;

.news-list {
  width: 450px;
  background-color: $main-color;
}
.banner-list {
  min-height: 50px;
  background-color: $main-color;
}

mixin

スタイルから使いまわしたい箇所を分離することができる機能で、引数も設定できます。
「外側だけ共通化して内部のコンテンツは個別に記入させる」ということも可能で、
こちらを利用することでメディアクエリを共通化する、といった使い方もできます。

@mixin smartphone() {
  @media screen and (min-width: 768px) {
    @content;
  }
}

@include smartphone {
  // 内容
}

ファイル分割

複数のSassファイルを結合する@importという機能があります。

.test-contents {
  display: inline-block;
}

@import による参照時、アンダースコア( _ )と拡張子(.sassまたは.scss)は省略できます。

@import "part"

#container {
  display: block;
}

↓ コンパイル

.test-contents {
  display: inline-block;
}

#container {
  display: block;
}

どこに感動したか

これらのSassの機能を利用することでCSSを変更に強くすることができます。

変数、mixinを利用して共通箇所を一か所にまとめることで、
同じ内容を何度も書くリスク(記入ミス、仕様変更時の修正箇所増大、等々...)を減らすことができ、
ファイルを分けることで、gitで管理した際にどの部分を編集したのかを管理しやすくできます。

その結果、
変更が発生した場合でも修正箇所を見つけやすく、修正時のヒューマンエラーが発生しにくい、
変更に強いCSSができあがります。

まとめ

CSSを知っていながらSassを知らなかった人は他にもいるはず...と思い記事を作りました。
どうか同じ境遇の方に届いてほしいと願っています。