コーディングの効率化におすすめなのが「Sass」です。
今回はよく使うSassの書き方について解説していきます。
ぜひ最後まで見ていってください！
Sassとは
Sassとは、入れ子(ネスト)や変数、関数が使用できたり、ファイルを分割して管理できたり、CSSでのデメリットを解消し、便利にした拡張言語です。
「SASS記法」と「SCSS記法」の2つの記法がありますが、「SCSS記法」の方が普及しているので、ここでは「SCSS記法」について解説します。
入れ子(ネスト)
CSSでは一つのセレクタに対してそれぞれスタイルを記述する必要がありますが、Sassでは親子関係のセレクタを入れ子(ネスト)を利用してコードの記述量を減らし、わかりやすくすることができます。
以下のようなHTMLがあるとします。
<section>
<h1>見出しが入ります</h1>
<p>テキストが入ります</p>
</section>CSSを使うと以下のようにセレクタそれぞれにスタイルを記述します。
/*CSSを使った記述*/
section{
background-color: blue;
}
section h1{
font-size: 32px;
}
section p{
color: red;
}次にSassを使った場合、親要素の中に「{} (波かっこ)」を使用して子要素を入れることができ、記述量が減ります。
/*Sassを使った記述*/
section{
background-color: blue;
h1{
font-size: 32px;
}
p{
color: red;
}
}このSassで記述したスタイルをコンパイルをすると以下のようにCSSで記述した時と同じように変換されます。
/*Sassをコンパイルした後*/
section{
background-color: blue;
}
section h1{
font-size: 32px;
}
section p{
color: red;
}コメントアウト
Sassのコメントは記述方法が2つあり、「//」を使用したコメントはCSSにコンパイルされると消えます。
/*このようにコメントするとコンパイル後は残ります*/
//このようにコメントするとコンパイル後は消えます& (アンパサンド)
&(アンパサンド)は親セレクタを参照し、入れ子機能をさらに便利にするものです。
&を使用すると、コンパイルする際に一つ上の階層のセレクタをそのままコピーしてくれます。
例えばaリンクにhoverを付与する際、CSSはこのように記述します。
a{
font-size: 18px;
color: black;
}
a:hover{
color: red;
}これをSassでアンパサンドを使用すると以下のように記述できます。
a{
font-size: 18px;
color: black;
&:hover{
color: red;
}以下のようにセレクタ名の一部としても使用することができます。
.button{
&--blue{
background-color: blue;
}//コンパイル後
.button .button--blue{
background-color: blue;
}演算
四則演算が使用でき、コンパイルする際に計算してCSSに書き出します。
足し算(+)、引き算(-)、掛け算(*)、余り(%)は以下のように記述します。
/*足し算*/
img{
width: (10 + 5)px;
}
/*引き算*/
img{
width: (10 - 5)px;
}
/*掛け算*/
img{
width: (10 * 5)px;
}
/*余り*/
img{
width: (10 % 5)px;
}コンパイルすると以下のようになります。
/*足し算*/
img{
width: 15px;
}
/*引き算*/
img{
width: 5px;
}
/*掛け算*/
img{
width: 50px;
}
/*余り*/
img{
width: 0px;
}割り算(除算)
Sassでは、割り算(除算)の(/)の使用は非推奨となっており、今後廃止になる予定です。
割り算をする場合は、まず@use "sass:math";をSassのスタイルシートの一番上に記述しモジュールを読み込ませます。
計算式math.div( )を記入し、「/ (スラッシュ)」の代わりに「, (カンマ)」を使用して計算したい値を入れます。
@use "sass:math"; /*必ず記入する！*/
img{
width: math.div(10, 5)px;コンパイルすると以下のようになります。
img{
width: 2px;
}変数
Sassは変数を使用することができます。
よく使用する要素を変数に指定しておくことでコードの記述、修正が簡単になります。
$main-color: green; //メインカラーに緑を指定
$sub-color: blue; //サブカラーに青を指定
section{
backgound-color: $main-color; //メインカラーを使用
h1{
font-color: $sub-color; //サブカラーを使用
}
}これをCSSにコンパイルすると以下のようになります。
section{
background-color: green;
}
section h1{
font-color: blue;
}ファイル分割 (パーシャル)
Sassを使用する際、機能ごとにファイルを分割することでファイルの管理や修正がしやすくなります。
分割したSassファイルはパーシャルと呼ばれ、「_ (アンダースコア)」をファイル名の直前に記述します。
パーシャルは直接CSSファイルにコンパイルされないので、CSSにコンパイルされるメインのSassファイルに@importを使用して読み込ませる必要があります。
「_header.scss」ファイルと「_index.scss」ファイルがあったとします。
メインの「style.scss」ファイルには以下のように記述することで読み込むことができます。
@import "header";
@import "index";mixin (ミックスイン)
mixin(ミックスイン)とは頻繁に使用するCSSのスタイルをあらかじめ定義しておき、まとめて呼び出すことができる機能です。
例えば、フォントのスタイルを設定する際、font-size、font-family、font-weight、colorなど指定する項目が多いことがあります。
mixinでこのスタイルをまとめて指定しておけば、簡単に別のSassファイルから呼び出すことができ、とても効率的です。
@mixin mixin名{スタイルを記入}でmixinを定義します。
//@mixinを定義
@mixin font{
font-family: serif;
font-weight: 400;
font-size: 16px;
color: #535353;
}mixinを呼び出すときは@include mixin名を記述します。
//@mixinを呼び出す
h1{
@include font;
}まとめ
今回はSassの書き方について解説してきました。
いかがだったでしょうか？
Sassをうまく利用することでコーディングを効率的に行うことができるようになります。
別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していきますのでそちらもぜひチェックしてみてください！
コメント