SCSS記法【Sass】
概要
Sass（サス）とは、CSSをより効率的に書くことのできる言語です。具体的にはCSSより記述を減らしたり、コードを再利用することができます。
SassにはSASS記法とSCSS記法の2種類があり、拡張子はそれぞれ「.sass」「.scss」です。今回はSCSS記法をアウトプットしていきます。
入れ子構造
▼CSSの記述
.header {
width: 100px;
}
.header ul {
margin: 20px;
}
▼Sassの記述
.header {
width: 100px;
ul {
margin: 20px;
}
}
入れ子構造を使うと通常のCSSを上記のように書き換えることができます。セレクタの中にセレクタを入れ子にすることで、同じセレクタを繰り返し書く手間が省けます。
記述量が増えるほど、そのメリットは大きくなります。
&（アンパサンド）
▼CSSの記述
li {
font-size: 20px;
}
li:hover {
background-color: blue;
}
▼Sassの記述
li {
font-size: 20px;
&:hover {
background-color: blue;
}
}
「&」を用いることで「セレクタ:hover」を「&:hover」に書き換えることができます。「:active」などにも同様に使えます。
▼CSSの記述
li {
font-size: 20px;
}
li.seond {
color: blue;
}
▼Sassの記述
li {
font-size: 20px;
&.seond {
color: blue;
}
}
また、上記のように同じ要素名を繰り返し書く場合も「&」で省略することができます。
変数
Sassでは変数を使用することができます。
変数は「$変数名: 値;」で定義します。値は変数に代入されます。
定義した変数名（$hoge-color）を適用したい箇所に記述することで使用することができます。変数は使用するより前の箇所に定義しておきます。
@mixin
@mixin fuga {
width: 100px;
padding: 50px;
}
mixinとは複数のコードを1つにまとめ、複数箇所で呼び出せる機能です。これにより同じコードを何度も書くことがなくなります。「@mixin mixin名 {コード}」で定義します。
@include
▼Sassの記述
.fuga-1 {
width: 300px;
margin: 30px;
background-color: #fff;
}
.fuga-2 {
width: 300px;
margin: 30px;
background-color: #fff;
}
▼Sassの記述（mixin使用）
@mixin fuga {
width: 300px;
margin: 30px;
background-color: #fff;
}
.fuga-1 {
@include fuga;
}
.fuga-2 {
@include fuga;
}
「@include mixin名」を記述することでmixinを呼び出すことができます。
引数
@mixin foge-date($color) {
font-size: 15px;
color: $color;
}
.card{
@include foge-date(#000);
}
予めmixinの引数を指定しておくことで、includeから値を渡すことができます。
上記の場合、incledeごとにcolorを変更できるようになります。
関数
.example {
color: darken(色, 50%);
// 色を暗くする関数。
color: lighten(色, 50%);
// 色を明るくする関数。
color: rgba(色, 0.5);
// 色の不透明度を指定する関数。
}
Sassでは様々な関数が用意されています。上記はよく使われるものです。
import
@import "hogehoge";
importは、外部のファイルを読み込むことができます。
読み込み先のファイルの先頭には「_hogehoge.scss」のように「_(アンダーバー)」を付ける必要があります。
import時に指定するファイル名は「_(アンダーバー)」と「.scss(拡張子)」を省略することができます。
使い方は、変数をまとめたファイルを作成し、使いたいファイル内で読み込みます。
