符号在 SASS 中不工作：之前

Question

我正在构建 spritesheet 按钮，如下所示：

<a class="Button one"></a>
<a class="Button two"></a>

风格：

a {
    // Add basic background and styling
    background: transparent url("images/background_image.png") no-repeat;

    // Add icon on top
    &:before {        
        content: '';
        display: block;

        //....
        background: transparent url("images/icons.png") no-repeat;

        // (1)
        &.one { @include tile(165px, 0, 0) }
        &.two { @include tile(165px, 1, 0) }
    }

    // (2)
    &.one:before { @include tile(165px, 0, 0) }
    &.two:before { @include tile(165px, 1, 0) }
}

现在我想添加变体样式，但是(1)不起作用，只能(2)。有没有办法避免重复:before？

Answer 1

如果你看一下编译后的 CSS，你会得到这样的结果：

a:before.one { /* ... */ }

CSS 像 :before 和 :after 这样的伪元素不能有类。如果你想让它更短，一种选择是结合类:

a {
    &.one, &.two {
        &:before { @include tile(165px, 0, 0) }
    }
}

但是既然你想为 mixin 使用不同的值，我认为 #2 是最干净的方法。

符号在 SASS 中不工作：之前

Ampersand not working in :before in SASS

css

sass