Sass嵌套规则与@extend继承

最新推荐文章于 2024-05-16 08:36:19 发布

mavengo

最新推荐文章于 2024-05-16 08:36:19 发布

阅读量671

点赞数 2

分类专栏： Sass语法文章标签： sass 前端

本文链接：https://blog.youkuaiyun.com/qq_41872385/article/details/124188176

版权

Sass语法专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Sass的嵌套规则和@extend继承特性。Sass嵌套规则允许在CSS中更整洁地组织结构，适合用于小型组件样式编写，而@extend则实现了样式复用，减少了HTML中类名的使用。通过这两个特性，开发者可以提高代码的可维护性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 Sass嵌套规则

二、@extend继承

一、 Sass嵌套规则

使用嵌套规则书写样式的时候依赖于HTML的结构。我认为应该用在“小结构中”不应该用在“大结构中”。所谓的小结构就是我们封装了一个小组件，它的结构已经确定了而且它嵌套样式影响的范围比较小，不近可以简化样式写法，也方便去维护。相反，如果你在一个页面从头到尾都使用嵌套规则书写样式，虽然当时挺轻松，不应去定义很多类名，但是对于后期样式方面的调整还是比较繁琐的。

嵌套规则写法：

<div class="box">
    <ul>
        <li>
            <a href="https://mp.youkuaiyun.com/" />
        </li>
    </ul>
</div>


.box {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    width:100px;
    height: 30px;
    text-decoration: none;
  }
}


// 如下是编译后的CSS文件
.box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box li {
  display: inline-block;
}
.box a {
  display: block;
  width:100px;
  height: 30px;
  text-decoration: none;
}

Sass嵌套属性

在CSS属性中很多都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。在Sass中可以通过嵌套属性进行编辑。建议这种前缀一样的多的时候采用这种写法，方便维护，要是单单就一个就没必要多此一举了。

二、@extend继承

@extend继承允许我们完全的去继承一个选择器所定义的样式。有了 @extend ，我们就不需要在 HTML 标签中指定多个类 class="basic common" ，只需要设置 class="common" 类就好了。很好的体现了代码的复用。

.basic  {
  padding: 10px 20px;
  text-align: center;
}

.common  {
  @extend .basic;
  background-color: #EEEEEE;
}