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 { /* ... */ }

像:before和:after这样的CSS伪元素不能有类。如果你想缩短它，一个选择就是组合这些类：

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

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

＆符号不工作：在SASS之前

1 个答案: