チャプター２では、Sassで使用される入れ子構造とコメントについて解説します。
「CSSを効率的に書く！Sassの入門講座」の第２章です。この講座については以下から確認できます。
ネストの基本
Sassでは、CSSのセレクタを入れ子状に記述することができます。これを「ネスト」と呼びます。
ネストを使用することで、HTMLのタグやクラス名などを簡略化することができます。
例えば、以下のように記述することで、HTMLのdiv要素内にあるp要素にスタイルを適用することができま
div {
padding: 50px ;
p {
color: red;
}
}通常のCSSで定義した場合は以下のようになります。
div {
padding: 50px;
}
div p {
color: red;
}Sassではネストでコーディングできるためスタイルの管理がしやすくなります。
セレクタの親子関係と詳細度
SCSSでは、セレクタをネストすることで、セレクタ同士を親子的な関係にすることができます。例えば、次のように書くことで、.parentセレクタ内の.childセレクタにスタイルを適用することができます。
.parent {
color: red;
.child {
font-weight: bold;
}
}このように、SCSSでは、セレクタをネストすることで、親子関係を表すことができます。
このとき、&、>、および (空文字)を使ってセレクタをネストすることができます。これらのいずれかを使うことで、セレクタの詳細度を変更することができます。
対応するindex.htmlサンプル
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- &を使った例 -->
<div class="parent">
<div class="child">ここにスタイルが適用される</div>
</div>
<!-- >を使った例 -->
<div class="parent">
<div>
<div class="child">ここにスタイルが適用される</div>
</div>
</div>
<!-- 空文字を使った例 -->
<div class="parent">
<div class="child">ここにスタイルが適用される</div>
<div>
<div class="child">ここにスタイルが適用される</div>
</div>
</div>
</body>
</html> &を使うと、現在のセレクタを継承することができます。
例えば、次のように書くことで、.parentセレクタのスタイルが.parent .childセレクタにも適用されます。
//「&」を使った場合
.parent {
color: red;
& .child {
color: blue;
font-weight: bold;
}
}
>を使うと、直接の子要素のみにスタイルを適用することができます。例えば、次のように書くことで、.parentセレクタの直接の子要素である.childセレクタのみにスタイルが適用されます。
//「>」を使った場合
.parent {
color: red;
> .child {
color: purple;
font-weight: bold;
}
}
(空文字)を使うと、単にセレクタをネストするだけです。このように書くと、.parentセレクタのすべての子要素である.childセレクタにスタイルが適用されます。
// 「」空白を使った場合
.parent {
color: red;
.child {
color: green;
font-weight: bold;
}
}
このように、SCSSでは、&、>、および (空文字)を使ってセレクタをネストすることで、セレクタの詳細度を変更することができます。
以上が、SCSSでセレクタをネストする際の&、>、および (空文字)の違いについてです。
コメントの書き方
Sassでは、//を使用して１行コメントを書くことができます。
例えば、以下のように書くことで、Sassファイル内にコメントを書くことができます。
// これはコメントですまた、/*と*/を使用することで、複数行にわたるコメントを書くことができます。例えば、以下のように書くことで、Sassファイル内に複数行にわたるコメントを書くことができます。
/*
これは複数行にわたるコメントです。
複数行にわたるコメントは、
複数行にわたる解説や注釈を書くために使用されます。
*/コメントは、Sassファイルをより管理しやすくするために重要です。コメントを書くことで、Sassファイルの内容をよりわかりやすくすることができます。
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
解いてみよう！小テスト：本章の復習
入れ子構造やコメントについて復習しましょう。
問1. SCSSでは、セレクタをどのようにネストすることができるでしょうか？
- 大文字で区切る
- スペースで区切る
- &を使って区切る
解答
答え：③ &を使って区切る
SCSSでは、&を使ってセレクタをネストすることができます。例えば、次のように書くことで、.parentセレクタ内に.childセレクタをネストすることができます。]
.parent {
color: #ff0000;
& .child {
color: #00ff00;
}
}問2. SCSSでは、どのように子セレクタを参照することができるでしょうか？
- &を使って参照する
- >を使って参照する
- 参照することはできない
解答
②. >を使って参照する
SCSSでは、>を使って子セレクタを参照することができます。
例えば、次のように書くことで、.parentセレクタ直下の子要素である.childセレクタを参照することができます。
.parent {
color: #ff0000;
> .child {
color: #00ff00;
}
}これらを実際に実装したサンプルはダウンロード教材のchapter02フォルダで確認できます。
チャプター２ 「入れ子構造やコメントについて理解する」のまとめ
チャプター２では、Sassで使用される入れ子構造やコメントについて学びました。
- 入れ子構造は、HTMLのタグやクラス名などを簡略化することができる便利な機能です。
- CSSのセレクタを入れ子状に記述することができます。
&を使用することで現在のセレクタを継承することができます。>を使用することで、子要素のみにスタイルを適用することができる。- コメントを記述することで、コードを解説することができます。
//を使用することで、1行コメントを記述することができます。/* */を使用することで、複数行のコメントを記述することもできます。
これらの技術を理解することで、Sassを使用した効率的で柔軟なコーディングが可能になります。
チャプター
次章では、Sassの基本の「変数と演算の基本を理解する」学びます。
