Sass:ネストのやりすぎ注意

goto_jp 153views 更新:2014年10月20日

Sassのネスト構造は非常に便利ですが、慣れてくるとつい下記のように長くなることがあります。

.classname {
    p {
    }
    a {
    }
    ul {
        li {
            div {
                a {

                }
            }
        }
    }
    .class1 {
        div {
            p {
            }
            a {
            }
        }       
    }
    .class2 {
        div {
            p {
            }
            a {
            }
        }
    }
    .classname2 & {
    }
}

上記はプロパティを省いて書いていますがプロパティが加われば当然長くなるので、下の方になると親のクラス名が見えなくなることも多々あり、ソースの可読性が下がってきます。

ましてや最後の「.classname2 &」といった親逆転のネストも入ると混乱しがちです。

下記のように、ある程度切りの良い箇所やリストなど階層が深くなりそうな箇所でネストを切ることでソースの可読性が増します。

.classname {
    p {
    }
    a {
    }
}
.classname ul {
    li {
        div {
            a {

            }
        }
    }
}
.classname .class1 {
    div {
        p {
        }
        a {
        }
    }
}
.classname .class2 {
    div {
        p {
        }
        a {
        }
    }
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません