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

Sass父选择器插值

sass css

sliptype · 技术社区 · 6 年前

& 在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 回复 | 直到 6 年前

Hooman 6 年前

这个 & #{} 语法。

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

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

Tigran 6 年前

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

将编译为

.a__element--modifier {
  color: blue;
}

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

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

Henry · scss或css中的calc函数不起作用

2 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

2 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前