Sassを使ったCSSの備忘録【冗長を無くそう】

2020年3月24日プログラミング

Sassの学習1

こんにちは、てーやまです。

Railsチュートリアルを進める中で、新たにSassという言語が出てきたので、ProgateのSassコースを受講してみました。

Progateで学習するSass

せっかく勉強したので『Sassとは何か』『どんなことができるのか』
自分の備忘録として、そしてこれからSassに触れる方の参考になるよう、残していこうと思います。

Sassとは

Sass(サス)はCSSと互換性がある拡張言語という位置付けです。
インデントや変数・関数の呼び出しをCSSに記述できることで冗長を無くし、よりメンテナンスし易い成果物を作成することができます。

CSSも何行にも渡るコードを書いていくと、どこに何が書いてあるのか、可読性も損なわれていくのではないでしょうか。Sassを使うことでよりシンプルに、綺麗なコードが書けそうなので、これを勉強しないのは勿体無い気がします。

とは言っても、Progateで何が出来るのかを学んだ程度の知識ですので、申し訳ありませんがSassの環境構築については触れません。
私自身が分かっていないので、機会があればまた発信したいと思います。

また、Sass自体をブラウザが理解する事はできず、サーバー側でCSSに変換する必要があります。(これをコンパイルと呼びます)

インデント

Sassを学ぶ中で最初に出会ったのが『インデント(字下げ)』でした。

プログラミング言語だと字下げしつつコーディングしていくのが普通なのですが、そう言われてみればCSSは字下げしているのをあまり見かけませんでした。

.header {
  width: 100%; 
}
.header ul {
  padding: 10px;
}

Sassを導入すると上記を以下のように記述できます。

.header {
  width: 100%;
 ul {
    padding: 10px;
  }
}

クラス名を何度も記述する必要が無いのと、字下げされていることで読みやすいと感じます。
具体的には字下げして書いたSassがコンパイルされるとCSSに変換されて実行されます。

変数

Sassでは変数が定義できる

変数は、プログラミング言語ではお馴染みの『値を入れておく箱』です。

Sassでも変数を定義する事ができるので、使い回すことで可読性が向上し、定義部で値を変更すれば全体に適用されるため、保守面においても優れています。

/*変数の定義*/
$fontsize: 16px;

p {
 font-size: $fontsize;
}

上記のように『$』に続いて変数名を定義し、右辺に設定値を記述します。
プログラミング言語の変数と同様、スコープがあるので注意が必要です。

mixin

mixin(ミックスイン)はメソッドようなイメージで使用できます。
複数のコードをあらかじめ記述しておき、各クラスで呼び出して使う事ができます。

/* mixinを定義 */
@mixin test {
  width: 100px;
  padding: 20px;
}

…

/* クラスで呼び出し */
.testclass {
  @include test;
}

これで同一コードを繰り返し記述する必要が無くなるので、効率もアップするし、冗長なコードが消えて綺麗になります。

更にmixinには引数を渡すこともでき、汎用的に使えます。
めちゃくちゃ便利です。

/* 引数付きのmixinを定義 */
@mixin test(fontsize) {
  width: 100px;
  padding: 20px;
  font-size: $fontsize;
}

…

/* クラスで呼び出し */
.testclass {
  @include test(16px);
}

外部ファイルの読み込み

またSassでは外部ファイルにコードを定義しておき、サブクラスでそれを継承することもできます。

その場合は外部ファイル名の頭文字に『_(アンダーバー)』が必要です。

/* _external.scss(外部ファイル) */
$fontcolor: #ffe400;

…

/* sub.scss(継承先ファイル)*/
@import "external";

.testclass {
  color: $fontcolor;
}

このようにSassを使うと色々と便利なので、備忘録として残しておきます。