Sass(SCSS)の基本構文5選
当サイトはアフィリエイト広告を利用しています。
Sassを書籍で学びたい方や初学者の方におすすめな書籍です。
Sassの概要や文法はもちろん、導入方法やフレームワーク、筆者が実際に仕事の現場で使用している実践的なテクニックまで幅広く紹介されています。
実際、初学時にかなりお世話になった書籍です。一緒に勉強しませんか？
¥2,138 （2022/06/04 15:36時点 | Amazon調べ）
ポチップ
実行環境
| OS | macOS Catalina 10.15.7 |
| Sass | 1.34.0 |
実行環境がない方は、こちらの記事を参考にしてください。
Sass(SCSS)の基本構文5選
今回は、Sass(SCSS)の基本構文を5つご紹介します。
- コメント
- 変数
- インターポレーション
- ネスティング
- 親セレクタ
コメント
コメントを使用するには、”/* 〜 */” でコメントを囲むか “//” でコメントアウトします。
/* 〜 */ で囲ったコメントはCSSファイルに出力されます。
// の後ろに記述したコメントはCSSファイルに出力されません。
/* CSSに出力されるコメント */
// CSSに出力されないコメント/* CSSに出力されるコメント */変数
変数を使用するには、変数名の頭に “$” をつけます。
スコープ外の変数を指定した場合、コンパイルエラーとなります。
ヒント
変数にはスコープ（範囲）という概念があります。
スタイルシートで宣言された変数は「グローバル変数」として扱われ、どこからでもアクセスできます。
ブロックで宣言されたものは「ローカル変数」であり、宣言されたブロック内でのみアクセスできます。
$color-red: red; // グローバル変数
.error {
color: $color-red;
}
.info {
$color-blue: blue; // ローカル変数
color: $color-blue;
}
// コンパイルエラー
// .info_border {
// border: solid 1px $color-blue;
// }.error {
color: red;
}
.info {
color: blue;
}インターポレーション
インターポレーションを使用するには、変数名を “#{ 〜 }” で囲みます。
インターポレーションを用いることで、セレクタやプロパティ名にも変数を使用することができます。
セレクタやプロパティ名にインターポレーションを使用しなかった場合、コンパイルエラーとなります。
$name: twitter;
.icon-#{$name} {
color: deepskyblue;
}
// コンパイルエラー
// .icon-$name {
// color: black;
// }.icon-twitter {
color: deepskyblue;
}ネスティング
セレクタをネストして記述することができます。
nav {
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
}nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}親セレクタ
セレクタの頭に “&” をつけることで、親セレクタを指定することができます。
a {
text-decoration: none;
&:hover {
opacity: 0.8;
}
}a {
text-decoration: none;
}
a:hover {
opacity: 0.8;
}お疲れさまでした
Sass(SCSS)の基本構文5選をご紹介しました。
少しでも参考になれば幸いです。