代码之家 › 专栏 › 技术社区 › sliptype

Sass父选择器插值

sass css

sliptype · 技术社区 · 7 年前

& 在sass中,选择器将输出父选择器两次:

.a {
    &__element {
          #{ & }--modifier { // Why does this output .a__element .a__element--modifier ??
            color: blue;
          }
    }
}

.b {
    &__element {
          & &--modifier {
            color: blue;
          }
    }
}

Compiles to :

.a__element .a__element--modifier {
  color: blue;
}

.b__element .b__element--modifier {
  color: blue;
}

.a__element--modifier . 有什么解释吗?

2 回复 | 直到 7 年前

Hooman 7 年前

这个 & #{} 语法。

要获得预期的输出,请使用:

.a {
    &__element {
        &--modifier {
            color: blue;
        }
    }
}

Tigran 7 年前

.a {
    &__element {
          &--modifier {
            color: blue;
          }
    }
}

将编译为

.a__element--modifier {
  color: blue;
}

插值只是插入 & 我们的情况就是这样 .a__element ,然后构造选择器。

推荐文章

ineedtoknow · 如何以重复模式(蓝色、紫色、红色)为儿童应用背景色[重复]

1 年前

user p · 如何修复Angular Material侧边栏的滚动问题

1 年前

Samvel · 无法通过sass模块编译scss文件

1 年前

Frankey · :not()CSS伪类未按预期工作

1 年前

Patrick Kenny · 如何将全局SCSS文件添加到Svelte/SvelteKit?

1 年前

Ch. · scs中@media的误导最小宽度和最大宽度

1 年前

Yiu Chak · 错误:“…m 55%在右侧”后无效CSS

1 年前

Sudeepa T · 无法定位元素[重复]

2 年前

kold-kreator · 编辑Bootstrap 5卡盒阴影的SASS

2 年前

JuliaBland299 · 如何使链接不占用网格中的空间?

2 年前