Sassを使ったCSSの備忘録【冗長を無くそう】
こんにちは、てーやまです。
Railsチュートリアルを進める中で、新たに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でも変数を定義する事ができるので、使い回すことで可読性が向上し、定義部で値を変更すれば全体に適用されるため、保守面においても優れています。
/*変数の定義*/
$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を使うと色々と便利なので、備忘録として残しておきます。