SCSS：语法糖&-item

大前端 uni-app scss

发布时间 : 2026-03-01 00:00

字数:136 阅读 :

情况一

.swiper {
  width: 100%;
  height: 352rpx;
  
  &-item {
    width: 100%;
    height: 100%;
  }
}

编译成 CSS：

.swiper {
  width: 100%;
  height: 352rpx;
}

.swiper-item {
  width: 100%;
  height: 100%;
}

&-item 是SCSS 语法糖，编译后变成 .swiper-item，避免重复、提升可维护性

.swiper {
  width: 100%;
  height: 352rpx;
  
  .swiper-item {   /* 注意：这里没有 &，是后代选择器 */
    width: 100%;
    height: 100%;
  }
}

编译成 CSS：

.swiper {
  width: 100%;
  height: 352rpx;
}

.swiper .swiper-item {
  width: 100%;
  height: 100%;
}

变成了 后代选择器 .swiper .swiper-item！

&-item的作用：写的时候更好看，日后代码好维护