s002：Sass（SCSS）の基本記法
公開日:2020年10月18日
更新日:2021年08月06日
Sassには「SASS記法」と「SCSS記法」の二種類あります。
SASS記法（今回こちらは使用しない）
Sassファイルを拡張子「.sass」で作成
- CSSのブロックを「{}」ではなくインデントで表現
- 命令終了の「;」を省略
CSSと記述法が違うためあまり普及しませんでした。
ul
background: red
li
padding: 10px
コンパイルして生成されるCSSファイル
ul {
background: red;
}
ul li {
padding: 10px;
}
SCSS記法（今回こちらを使用）
Sassファイルを拡張子「.scss」で作成
- CSSと互換性があり通常のCSS記法 + Sass記法で記述
CSSの記述法がそのまま使えるため、Sass記法の主流になっています。
ネスト（入れ子）にしたセレクタは子孫セレクタになります。
ul {
background: red;
li{
padding: 10px;
}
}
コンパイルして生成されるCSSファイル
ul {
background: red;
}
ul li {
padding: 10px;
}
子孫セレクタ：セレクタをネスト
子孫セレクタはセレクタをネストにすることで実現できます。
ul {
background: red;
li {
padding: 10px;
}
}
コンパイルして生成されるCSSファイル
ul {
background: red;
}
ul li {
padding: 10px;
}
親の参照：「&」
セレクタをネストすると子孫セレクタになってしまうため、「:hover」などの擬似クラスを定義する際は「親の参照」を意味する「&」を使用します。
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
コンパイルして生成されるCSSファイル
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
うまくいかない例
「&」を記述しないと子孫セレクタになり「a」と「:hover」のは間に半角スペースが入ってしまいます。
a {
text-decoration: none;
:hover {
text-decoration: underline;
}
}
コンパイルして生成されるCSSファイル
a {
text-decoration: none;
}
a :hover {
text-decoration: underline;
}
変数：「$変数名」
よく使う値を変数に代入して使用できます。
- 文字色や背景色などのカラーコード
- フォントファミリー
- カラム幅
- ブレイクポイント
変数に値を代入
「$」の後に変数名を記述し「:」の後に変数に代入する値を記述します。
$変数名: 値;
実際に使用してみます。
$color-main: #f00;
$color-sub: #0f0;
a {
text-decoration: none;
color: $color-main;
:hover {
text-decoration: underline;
color: $color-sub;
}
}
コンパイルして生成されるCSSファイル
a {
text-decoration: none;
color: #f00;
}
a :hover {
text-decoration: underline;
color: #0f0;
}
インターポレーション
文字列として変数を使用する場合は「#{変数名}」と記述します。
$path: '../img/';
.block {
background-image: url(#{$path}bg.png);
}
コンパイルして生成されるCSSファイル
.block {
background-image: url(../img/bg.png);
}
うまくいかない例
$path: '../img/';
.block {
background-image: url($path/bg.png);
}
コンパイルした際のエラー
--------------------
Compilation Error
Error: Invalid CSS after "...e: url($path/bg": expected expression (e.g. 1px, bold), was ".png);"
on line 4 of sass/c:\Users\x220\Desktop\test\sass_test\css\style.scss
>> background-image: url($path/bg.png);
--------------------------------^
計算
値を計算できます。
- + : 加算
- – : 減算
- * : 乗算
- / : 除算
- % : 余り算
除算の「/」はCSSの一括指定でも使用するため（）で囲んで使用するか、変数と共に使用します。
$width: 100%;
.col2 {
width: $width/2;
}
.col3 {
width: $width/3;
}
.col4 {
width: $width/4;
}
コンパイルして生成されるCSSファイル
.col2 {
width: 50%;
}
.col3 {
width: 33.33333%;
}
.col4 {
width: 25%;
}
コメント
通常の「/* コメント */」と1行コメント「// コメント」が使えます。
1行コメントはコンパイル後のファイルに出力されません。
$width: 100%;
// 2列幅用クラス
.col2 {
width: $width/2;
}
// 3列幅用クラス
.col3 {
width: $width/3;
}
// 4列幅用クラス
.col4 {
width: $width/4;
}
コンパイルして生成されるCSSファイル
.col2 {
width: 50%;
}
.col3 {
width: 33.33333%;
}
.col4 {
width: 25%;
}
慣れてきたら使うもの
- よく使う記述をテンプレート化：@mixin
- テンプレートの呼び出し：@include
- @includeで引数利用
- @includeで初期値利用
- セレクタの継承：@extend
- プレースホルダー：%
- 配列
- 条件分岐：@if
- 比較演算子・論理演算子
- 繰返し構文：@for
- 繰返し構文：@while
- 繰返し構文：@each
- 関数：@function
同じタグのコンテンツ
同じカテゴリーのコンテンツ
