まず、Sassとは??

Syntactically（文法的に） Awesome（イケてる・すごい） StyleSheet（スタイルシート）の略であるSassはCSSのメタ言語(*1)といわれている。

つまりはCSSの文法そのものを記述するのではなく、CSSのコードを効率的に生成するために用いられる別の言語ということ。らしい

Sassには「SCSS」と「SASS」という2つの記法があるようだ。「{}」をつける(SCSS)かつけない（SASS）かの違いだが、SCSSの方が見やすく、採用されているところも多いように思う。

Sassでできること

公式サイトで確認します。
https://sass-lang.com/guide

※セットアップ方法は今回省略します。

Variables(変数)

Sassは変数を定義することができる。（ブラウザ依存がない）
color、font-family、breakpointや再利用したいCSS値を保存しておける。
作業効率やメンテナンス性が向上する。
共通して使用するファイルにグローバル変数を定義しておき、それを読み込むようにしておけば全員同じ環境でコーディングを行うことができる。
colorのコードが変更された時も変数定義の箇所を変更するだけで済む。

使い方(color)


$primary: #064796;

.main-message {
  color: $primary;
}

使い方(font-family)


$font-family-base : "Noto Sans JP", sans-serif;

.main-container {
  font-family: $font-family-base;
}

使い方(breakpoint)

$breakpoint-small: 600px;
$breakpoint-large: 960px;

@media screen and (max-width: $breakpoint-small) {
  ....
}

Nesting(ネスト、入れ子)

HTMLのDOM構造のようにCSSセレクターをネストできる。
だが、ネストの階層が深くなったり複雑だと、CSSの品質が高くなり、メンテナンスが困難になる可能性があり、そのような設計は避けた方が良いようだ。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

Partials(パーシャル、部品)

CSSをモジュール化し、管理を容易にすることができる。
ファイル名前の先頭にアンダースコアが付いている。（例: _partial.scss）
CSSファイルに生成されるべきではないことをSassに知らせる。
Sassパーシャルは@useルールで使用される。

Modules(モジュール、まとまり)

Sassはモジュール化することができる。
ファイル名に基づく名前空間を使用して、Sassファイル内の変数、ミックスイン、関数を参照できる。
ファイルを使用すると、ファイルが生成するCSSもコンパイルされた出力に含まれる。

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Mixins（ミックスイン）

ミックスインを使用すると、サイト全体で再利用するCSS宣言のグループを作成できる。
値を渡して、ミックスインをより柔軟にすることもできる。
ベンダープレフィックスを使用する時も便利なようだ。

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

ミックスインを作成するには、@mixinディレクティブを使用して、名前を付ける。
また、変数を渡すことができる。
ミックスインを作成したら、@includeでミックスインの名前を宣言して使用できる。
[ちょこっとmemo] : breakpointをミックスインで定義しておけば覚えておく必要がなくなり使いまわせて便利!

Extend/Inheritance（拡張/継承）

Sassの最も便利な機能の1つという。
@extendを使用すると、CSSプロパティのセットを1つのセレクターから別のセレクターに共有できる。
プレースホルダークラス(%)は、拡張されたときにのみ印刷されるため、コンパイルされたCSSをすっきりとクリーンに保つことができる。

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}
...

プレースホルダーを使用するのが最も簡単な方法で、スタイルの他の場所にネストされているクラスを拡張しないようにする。
これにより、CSSで意図しないセレクターが発生する可能性を回避できる。
この例では、％equal-heightsは拡張されないため、このCSSは生成されない。

Operators(演算子)

Sassでは、+、-、*、/、％などの標準的な数学演算子が使用できる。

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Sassでの操作では、ピクセル値を取得して、それほど面倒なことなくパーセンテージに変換するようなことができる。

公式の説明が簡潔にわかりやすくまとまっている。。。！
これを基にいろいろ試していこう！！！

*1 メタ言語 : 言語を定義したり、言語についての情報を記述したりするための言語。

参考にしたい記事