如何使用sass的嵌套功能？

Question

最近在看百度，腾讯的前端规范，其中都有提到嵌套层级的问题。
百度：

腾讯：

那么应该如何选择嵌套层级？假如我有一个比较复杂的结构如下：

div.banner-box
    div.banner
        div.left
            a(href = "xx")
                img
        div.right
            div.right-inner
                div.btn-list
                    div.btn
                        div.btn-inner
                        a
                    div.btn
                        div.btn-inner
                        a
                    div.btn
                        div.btn-inner
                        a
                        

我要如何才能取到最后的div.btn > div.btn-inner > a？选择怎样的层级比较合适？

Answer 1

.banner-box{
    .banner{
        //
    }
    .left{
        a{
            //
        }
        img{
            //
        }
    }
    .right{
        //
    }
    .right-inner{
        //
    }
    .btn-list{
        //
    }
    .btn{
        a{
            //
        }
    }
    .btn-inner{
        //
    }
}