Sassとは？
Sassとは、一言で言うとCSSをより効率的に書けるようにした言語です。
Sassでは変数や関数を使えるようになるため、CSSよりも効率的にコーディングをおこなうことができます。
Sassファイルのままではhtmlで読み込めないので、CSSファイルに変換する作業（コンパイル）が必要になります。
Sassの記法について
Sassには、「SASS記法」と「SCSS記法」という2つの記法があります。
SASS記法
SASS記法では次のような書き方をします。
section
padding: 1em 2em
p
margin-top: 0
{}を使わずに、インデントを使って書いていくのが特徴です。末尾に「;」も必要ありません。
拡張子は「.sass」です。
SCSS記法
SCSS記法では次のような書き方をします。
section {
padding: 1em 2em;
p {
margin-top: 0;
}
}
CSSと似ていますが入れ子で書いていくのが特徴です。
拡張子は「.scss」です。
どちらもコンパイル後のCSSファイルでは以下のような記述になります。
section {
padding: 1em 2em; }
section p {
margin-top: 0; }
Sassの便利な機能（CSSで書いた場合との比較）
ネスト（入れ子）
ネスト（入れ子）にすることで、親要素を何度も書かずに済むので記述量が減ります。
Sassで書いた場合
section {
padding: 1em;
p {
margin-top: 1em;
span {
font-size: 80%;
}
}
}
CSSで書いた場合
section {
padding: 1em;
}
section p {
margin-top: 1em;
}
section p span {
font-size: 80%;
}
変数
色の場合など、カラーコードを変数にすればいちいちコピペしたり覚えておく必要がないので、効率的にコーディングすることができます。
繰り返し使う色などは変数にしておくことをオススメします。
Sassで書いた場合
$accentColor: #D7263D; //変数
section{
p{
color : $accentColor;
}
.border {
border: solid 2px $accentColor;
}
}
p {
span {
color : $accentColor;
}
}
CSSで書いた場合
section p {
color: #D7263D;
}
section .border {
border: solid 2px #D7263D;
}
p span {
color: #D7263D;
}
mixin
@mixinで定義したスタイルを@includeで呼び出すことができます。
mixinでは引数を使用することができるので、呼び出す場所に合わせてスタイルを変更することが可能です。
Sassで書いた場合
@mixin btnColor($color, $background) {
color: $color;
background-color: $background;
}
.btn-default {
@include btnColor(#fff, #333); // mixinを呼び出す
}
.btn-primary {
@include btnColor(#000, #fff); // mixinを呼び出す
}
CSSで書いた場合
.btn-default {
color: #fff;
background-color: #333;
}
.btn-primary {
color: #000;
background-color: #fff;
}
extend
定義しているスタイルを継承することができます。
同じ記述を何度もしなくて済むので記述量が減ります。
Sassで書いた場合
.btn {
color: #fff;
background-color: #333;
}
.btn-info {
@extend .btn; //.btnのスタイルを継承
border : 2px solid #999
}
CSSで書いた場合
.btn {
color: #fff;
background-color: #333;
}
.btn-info {
color: #fff;
background-color: #333;
border: 2px solid #999;
}
まとめ
今回はSassの便利な機能をご紹介しました。
今回のサンプルコードでは記述量が少ないのでメリットを感じにくかったかもしれませんが、記述量が増えるにしたがってSassのメリットを感じられるはずです。
気になった方はぜひ導入をしてみてはいかがでしょうか。
Sassをインストールする方法はこちらの記事にまとめてあります。
https://www.rail-c.com/archives/1164
最近のコメント