Sass教程七：Sass知识点之——嵌套

最新推荐文章于 2021-12-29 08:42:00 发布

/*----无忧----*/

最新推荐文章于 2021-12-29 08:42:00 发布

阅读量746

点赞数 1

分类专栏：前端工具文章标签： scss sass css预处理

本文链接：https://blog.csdn.net/q213546879/article/details/98768087

版权

本文介绍了Sass的嵌套特性，如何通过嵌套简化CSS代码结构。讨论了在使用嵌套时遇到的问题，如伪类选择器的空格问题，以及如何利用"&"符号解决。同时，文章还探讨了属性嵌套的概念，允许将相关属性组织在一起，提高代码可读性和效率。

摘要由CSDN通过智能技术生成

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器, 考虑用css实现下面这个布局：

那么用css 我们可能会这样写：

nav {
  height: 40px;
  border-bottom: 1px solid #333;
  line-height: 40px;
}
nav ul {
  float: left;
  height: 100%;
}
nav ul li {
  float: left;
  height: 100%;
  border-right: 1px solid #333;
  padding: 0 20px;
}

可以看到后面两个选择器都有共同的父级 nav，

现在我们用sass的嵌套来重写一下这段代码：

nav{
  height: 40px;
  border-bottom: 1px solid #666;
  line-height: 40px;

  ul{
    float: left;
    height: 100%;

    li{
      float: left;
      height: 100%;
      border-right: 1px solid #333;
      padding: 0 20px;
    }
  }
}

编译之后的结果：
nav {
  height: 40px;
  border-bottom: 1px solid #666;
  line-height: 40px;
}
nav ul {
  float: left;
  height: 100%;
}
nav ul li {
  float: left;
  height: 100%;
  bor