scss(sass)中 & 的使用说明

在 SCSS(Sass)中,& 符号是一个父选择器引用,它代表当前嵌套规则的外层选择器。主要用途如下:


1. 连接伪类/伪元素

scss

复制

下载

复制代码
.button {
  background: blue;
  &:hover {  // 相当于 .button:hover
    background: darkblue;
  }
  &::after { // 相当于 .button::after
    content: ">";
  }
}

编译结果:

css

复制

下载

复制代码
.button {
  background: blue;
}
.button:hover {
  background: darkblue;
}
.button::after {
  content: ">";
}

2. 串联选择器(BEM 风格命名)

scss

复制

下载

复制代码
.menu {
  &__item {   // 相当于 .menu__item
    color: red;
  }
  &--dark {   // 相当于 .menu--dark
    background: black;
  }
}

编译结果:

css

复制

下载

复制代码
.menu__item {
  color: red;
}
.menu--dark {
  background: black;
}

3. 嵌套上下文

scss

复制

下载

复制代码
.page {
  .dark-theme & { // 相当于 .dark-theme .page
    background: #333;
  }
}

编译结果:

css

复制

下载

复制代码
.dark-theme .page {
  background: #333;
}

4. 避免重复书写父选择器

scss

复制

下载

复制代码
.card {
  &-header { ... }  // .card-header
  &-body { ... }    // .card-body
  &-footer { ... }  // .card-footer
}

⚠️ 注意事项

  • & 必须写在选择器开头&hover(错误)❌ → &:hover(正确)✅

  • 深层嵌套时& 会引用完整的选择器链:

    scss

    复制

    下载

    复制代码
    .a {
      .b & { // 编译为 .b .a
      }
    }

总结

场景 示例 编译结果
伪类 &:hover .parent:hover
BEM 命名 &__item .parent__item
修改上下文 .context & .context .parent
简化重复前缀 &-suffix .parent-suffix

合理使用 & 能让 SCSS 代码更简洁、可读性更强,特别适合组件化开发和 BEM 命名规范!

相关推荐
Hilaku2 分钟前
别再手写i18n了!深入浏览器原生Intl对象(数字、日期、复数处理)
前端·javascript·代码规范
每天吃饭的羊6 分钟前
强制缓存与协商缓存
前端
缘来小哥11 分钟前
Nodejs的多版本管理,不仅仅只是nvm的使用
前端·node.js
陈随易12 分钟前
Vite和pnpm都在用的tinyglobby文件匹配库
前端·后端·程序员
Cache技术分享1 小时前
141. Java 泛型 - Java 泛型方法的类型擦除
前端·后端
YGY_Webgis糕手之路1 小时前
OpenLayers 综合案例-基础图层控制
前端·gis
PineappleCoder1 小时前
玩转CSS3新特性:让你的网页会“呼吸”!
前端·css·设计
言兴1 小时前
构建高效 React 应用:从组件设计到状态管理的全面指南
前端·javascript
国家不保护废物1 小时前
🔐 前端JWT登录鉴权实战:从原理到Zustand状态管理
前端·javascript·react.js
程序员小宋1 小时前
🚀 Node.js升级实战:从"老爷车"到"特斯拉"的蜕变之旅
前端