Question

是否必须将所有子元素嵌套到它的父元素中？请看一下我的示例代码。我看到一些文章，他们警告说只能将子元素嵌套到4个级别。但在这里，我把所有的孩子都包裹在它的父母身边。可以像这种格式一样编写sass吗？

<div class="col-md-3 left-side">
 <div class="profile-info">
    <img src="img/user.jpg" alt="">
    <div class="info">
    <p>Header</p>
    <span>2 minutes ago</span>
 </div>
</div>

<div class="ads">
 <h4>Advertisements</h4>
 <img src="img/ad1.jpg" alt="">
 <p>Grab your book !!!</p>
    <img src="img/ad2.jpg" alt="">
    <p>Hurry up. Limited offers !!!</p>
    <img src="img/ad3.jpg" alt="">
    <p>Grab your book !!!</p>
    <img src="img/ad4.jpg" alt="">
    <p>Hurry up. Limited offers !!!</p>
    </div>
</div>

.left-sidebar{
    height: auto;
    background-color: #fff;
    .ads{
        img{
            width:100%;
        }
        h4{
            margin-top:45px;
            margin-top: 45px;
        font-weight: 600;
        }
        p{
            margin-top: 5px;
            font-weight: 500;
            margin-bottom: 22px;
        }
    }
    .profile-info{
        @include basic_style;
        padding-top: 31px;
        .info{
            padding-top: 28px;
            padding-left: 16px;
            display: inline-block;
            @media only screen and (max-width: 1200px){
                padding-top: 20px;
                padding-left: 0px;
                text-align: center;
                display: block;
            }
        }
        img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            float: left;
            @media only screen and (max-width: 440px){
                width: 85px;
                height: 85px;
            }
            @media only screen and (max-width: 1200px){
                display: block;
            margin: 0 auto;
                float: none;
            }
        }
        p{
            @include post_title;
        }
        span{
            @include sub_header;
        }   
    }
}

Answer 1

此代码的问题在于您无法在右侧侧栏或其他位置使用.ads或.profile-info块。您的代码是依赖于上下文的。

为了改善情况，您可以阅读BEM（块元素修饰符）。

首先，您应该删除.left-sidebar选择器。其次，有点选择器不好，所以在内跨，图像和段落中添加类名。

您的代码如下：

.left-sidebar {
    height: auto;
    background-color: #fff;
}

.ads {
    .img {
        width:100%;
    }

    .h4 { // .h4 is just an example, write some more meaningful name
        margin-top:45px;
        margin-top: 45px;
        font-weight: 600;
    }

    .p {
        margin-top: 5px;
        font-weight: 500;
        margin-bottom: 22px;
    }
}

// styles for .profile-info

但是这个scss会产生不必要的第二级选择器，如.ads .img {}。您可以按照BEM方法仅编写第一级选择器。

SCSS：

.ads {
    &__img {
        width:100%;
    }

    &__h4 {
        margin-top:45px;
        margin-top: 45px;
        font-weight: 600;
    }

    &__p {
        margin-top: 5px;
        font-weight: 500;
        margin-bottom: 22px;
    }
}

Css输出：

.ads__img {
  width: 100%;
}
.ads__h4 {
  margin-top: 45px;
  margin-top: 45px;
  font-weight: 600;
}
.ads__p {
  margin-top: 5px;
  font-weight: 500;
  margin-bottom: 22px;
}

<强>摘要

不要将所有子元素嵌套到它的父元素中。编写更多可重用且与上下文无关的代码。

SASS筑巢最佳实践？

1 个答案: