SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。
今回はScss（Dart Sass）での基本的な使い方と書き方で、セレクタ・プロパティ・メディアクエリのネスト（入れ子）について紹介します。
もくじ
ネスト（入れ子）について
CSSではセレクタやプロパティ・メディアクエリを重複して書くことが多くあります。
Sassではセレクタやプロパティ・メディアクエリをネスト（入れ子）にすることでコードをシンプルにし、可読性を上げることができます。
セレクタのネスト
たとえば下記のようなCSSを作成したいとします。
CSSでの書き方
nav {
background-color: #323232;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
素でcssを書こうとすると、nav・nav ul・nav ul liのように、重複するセレクタを何度も記述しなければなりません。
Sassでは、セレクタをネスト（入れ子に）することで重複している部分を省略して記述することが可能です。
scssでの書き方
nav {
background-color: #323232;
ul {
list-style: none;
padding: 0;
li {
display: inline-block;
margin-right: 10px;
}
}
}
navの{}の中にulの{}を記述し、更にulの{}の中にliの{}を記述することで、コンパイル時にnav・nav ul・nav ul liを生成します。
入れ子にしたプロパティの親子関係をわかりやすくするために、インデントを適切に設定しましょう。
'&'を使ったプロパティのネスト
通常、scssのプロパティのネストは、親セレクタと子セレクタを半角スペースで区切ってコンパイルします。
子セレクタの頭に&をつけて記述すると、親セレクタと子セレクタを繋げてコンパイルします。
CSSでの書き方
a {
color: #007bff;
}
a:hover {
text-decoration: underline;
}
input{
font-size: 1.6rem;
}
input[type="text"]{
padding: .5rem;
}
.block{
margin: 1rem 0;
}
.block__element{
text-align: center;
}
.block__element--modifier{
color: #cc0000;
}
aと:hoverはスペースで区切らずに続けて記述する必要があります。
また、inputと[type="text"]も同様です。
クラス名を&を利用してネストすると、重複部分を省略して記述することができます。
scssでの書き方
a {
color: #007bff;
&:hover {
text-decoration: underline;
}
}
input{
font-size: 1.6rem;
&[type="text"]{
padding: .5rem;
}
}
.block{
margin: 1rem 0;
&__element{
text-align: center;
&--modifier{
color: #cc0000;
}
}
}
a{}内で:hover用のネストを行う際に、:hoverの前に&をつけるとa:hoverとして出力されます。:focus・:first-childなどの疑似クラスの他、::before・::afterなどの疑似要素、[type="text"]などの属性セレクタにも利用できます。
クラス名を指定する時に重複する部分を&で省略すると、コードを省エネで記述することができ、また可読性を上げることができます。
プロパティのネスト
たとえば下記のようなCSSを作成したいとします。
CSSでの書き方
.block {
background-color: #f7f7f7;
background-image: url('image.jpg');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
.box {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
.box p{
font-weight: bold;
font-size: 16px;
font-family: 'Arial', sans-serif;
text-align: center;
text-decoration: underline;
}
.box ul{
list-style: none;
list-style-type: square;
}
.card{
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
CSSでは語頭が同じプロパティを何度も書かなきゃいけないことがあって発狂しそうになります。
Sassではハイフン（-）前の単語をネストして複数のプロパティをまとめて記述することができます。
scssでの書き方
.block {
background: {
color: #f7f7f7;
image: url('image.jpg');
position: top center;
repeat: no-repeat;
size: contain;
}
}
.box {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
.box p{
font: {
weight: bold;
size: 16px;
family: 'Arial', sans-serif;
}
text: {
align: center;
decoration: underline;
}
}
.box ul{
list: {
style: none;
style-type: square;
}
}
.card{
padding: {
top: 5px;
right: 10px;
bottom: 5px;
left: 10px;
}
margin: {
top: 5px;
right: 10px;
bottom: 5px;
left: 10px;
}
}
まとめられるプロパティは、たとえば下記の通りです。
- background-系
- border-系
- font-系
- text-系
- list-系
- padding-系
- margin-系
- flex-系
- transition-系
- animation-系
- column-系
- outline-系
まとめられるプロパティはまとめちゃって、ソースの可読性を上げてみましょう。
メディアクエリのネスト
レスポンシブデザインに必須のメディアクエリの設定は、@mediaルールごとに記載箇所が分離して管理しづらいことがあると思います。
Sassではセレクタ内にメディアクエリをネストすることができるので、記述をまとめて管理しやすくなります。
CSSでの書き方
.container {
width: 100%;
max-width: 1400px;
}
@media (min-width: 768px) {
.container {
max-width: 1000px;
}
}
@media (min-width: 768px) {
.container {
max-width: none;
}
}
メディアルールごとにセレクタとプロパティを書かなければならないので、重複が多い状態です。
scssでの書き方
.container {
width: 100%;
max-width: 1400px;
@media (max-width: 768px) {
max-width: 1000px;
}
@media (max-width: 768px) {
max-width: none;
}
}
セレクタ内にメディアルールをネストできるので、セレクタを何度も書く必要がありません。
最後に
ネストはSassの代名詞とも言える代表的な便利機能です。
ネストを使いこなして省エネで読みやすいコーディングをしてみましょう。
