みなさまお久しぶりです！
今回は、CSSをより効率的に記述できる言語であるSCSSの入門です！
私自身、職業訓練校時代にはCSSでスタイルを設定していましたが、入社してSCSSを使用してみて効率的でかつ簡単にコードを書くことができると思ったためご紹介します。
ネストの基本
SCSSは、より効率的なCSSコードを書くのに役立ちます。
SCSSを使用することでネスト、変数、関数などの機能を活用して記述することができます。
そのため、より良いCSSコードをより少ない時間で作成したい場合は、SCSSを使ってみましょう。
ネストの例
子要素、孫要素
SCSSでは、ネストを使うことで、親要素と子要素、孫要素の関係を直感的に表現できます。
例えば、以下のようなコードを考えてみましょう。
.header {
background-color: #000;
color: #fff;
}
.header_logo {
font-size: 20px;
}
.header_logo a {
display: block;
width: 100px;
}
CSSではクラス名ごとにスタイルを指定する必要がありますが、SCSSのネストは、スタイルを階層的に記述するのに便利です。
.header {
background-color: #000;
color: #fff;
&_logo {
font-size: 20px;
a {
display: block;
width: 100px;
}
}
}
このようにSCSSのネストは、CSSをより読みやすく修正しやすくします。
ネストは、親要素からの相対的な位置にスタイルを適用するのに役立ちます。親要素のスタイルが子要素や孫要素にも継承されるため、深い階層の要素をスタイリングする際に効果的です。
メディアクエリ
メディアクエリは、デバイスの幅や特性に基づいてスタイルを変更するためのツールです。
ネストを使用することで、特定のメディアクエリ内でスタイルを定義する場合にも、同じ階層構造を保持したままコードを整理できます。
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
@media screen and (max-width: 768px) {
width: 100%;
}
}
このようにすることで、レスポンシブデザインに便利なスタイルを効率的に適用できます。
擬似クラス
擬似クラスもネスト内で活用することができます。例えば、リンクがホバーされた際のスタイルを定義する際に、親要素内で擬似クラスを適用することが可能です。
.button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
display: inline-block;
text-decoration: none;
&:hover {
background-color: #2980b9;
}
&:active {
background-color: #1f618d;
}
}SCSSのネストを活用することで、擬似クラスを元の要素に関連付けやすくなります。
CSSでもネストが使用可能になりました！
従来、ネストはSCSSなどのプリプロセッサでのみ利用可能でしたが、CSS自体でもネストがサポートされるようになりました。
これにより、プリプロセッサを必要とせずに、ネストの利点を活かすことができます。
<section>
<title>タイトル</title>
</section>上記のようなHTMLがあったとします。
CSSのネストに対応したブラウザでは、次のように記述できます。
section{
.title {
font-size: 32px;
}
}ですが、SCSSなどのCSSプリプロセッサでのネストとCSSのネストは仕様が少し異なります。
SCSSではできて、CSSではできない書き方
要素名のセレクター
先ほどのHTMLで次のようなCSSを記述します。
section {
h1 {
color: red;
}
}要素名のセレクターの場合は、上記のようにしてもスタイルが当たりません。
そのため、&を使う必要があります。
section {
& h1 {
color: red;
}
}親要素のクラス名の一部を使った記法
始めに、SCSSではheader_logoを以下のように記述できると説明しました。
.header {
&_logo {
//省略
}
}こういった使い方はCSSのネストでは使用できません。そのため、CSSで同じ効果を得るには、以下のように記述する必要があります。
.header {
& .header_logo {
//省略
}
}CSSのネストが対応しているブラウザ
Chrome・Edge・Safariなどでもすでに基本的なサポートは行われており、Firefox 117でも8月29日にリリースされ、ネイティブなCSSでネスト構造を書くことができるように対応が進んでいます。
https://caniuse.com/css-nesting
まだまだ対応ブラウザが少ないので、使用する際には、ブラウザの互換性に注意が必要です。
まとめ
今回はSCSSの基本機能の1つネストについて紹介しました。
ネストは、CSSを効果的に活用するための重要なテクニックです。要素の階層を考慮してスタイリングすることで、コードの可読性や保守性を向上させることができます。
また、CSSの最新仕様でもネストが導入され、これまでSCSSなどのプリプロセッサでしか利用できなかった機能が本格的なCSSでも利用できるようになりました。ですが、ブラウザの互換性に注意しながら、ネストを活用してスタイルを記述することが大切です。
これからもネストを活用して、スタイルの整理や効率的な開発に取り組みましょう！
