【SCSS进阶】3、深度嵌套和模块化设计

原创

已于 2024-06-10 01:39:35 修改 · 642 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端 #css

于 2024-06-09 00:25:53 首次发布

【SCSS进阶】深度嵌套和模块化设计

系列文章目录

【SCSS进阶】1、控制指令（@if、@for、@each、@while）
【SCSS进阶】2、高级变量和数据结构（列表、映射）
【SCSS进阶】3、深度嵌套和模块化设计（本文）
【SCSS进阶】4、高级混合宏和占位符选择器
 【SCSS进阶】5、自定义函数
 【SCSS进阶】6、CSS网格和Flexbox布局
 【SCSS进阶】7、响应式设计和媒体查询
 【SCSS进阶】8、优化和压缩SCSS代码
 【SCSS进阶】9、与PostCSS、Autoprefixer等工具的集成
 【SCSS进阶】10、最佳实践和性能优化

在前面的文章中，我们学习了SCSS中的高级变量和数据结构。本章将深入探讨SCSS中的深度嵌套和模块化设计，帮助你编写更加结构化和易维护的样式代码。

深度嵌套

SCSS允许你将选择器嵌套在其他选择器内，使样式代码更加直观和层次化。深度嵌套是嵌套规则的一种高级用法，可以有效地反映HTML结构，但过度嵌套可能会导致复杂的CSS选择器，影响性能和可维护性。

基本嵌套

示例：基本嵌套

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
  }
}

编译后的CSS代码：

nav ul {
   
   
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
   
   
  display: inline-block;
}

nav ul li a {
   
   
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

父选择器引用

使用 & 符号可以引用父选择器，这在伪类、伪元素和复杂嵌套结构中非常有用。

示例：父选择器引用

button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: #2980b9;
  }

  &::before {
    content: '▶';
    margin-right: 10px;
  }

  &.primary {
    background-color: #2ecc71;

    &:hover {
      background-color: #27ae60;
    }
  }
}

编译后的CSS代码：

button {
   
   
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
}

button:hover {