如何通过嵌套在 Sass 中向属性选择器添加附加信息？

Question

我试图避免“class'itis”并利用 SASS 嵌套来实现以下 CSS 输出：

a[class^="utility-button"], a[class*=" utility-button"] { //some shared css rules}
.utility-button-one {//some unique css rules}
.utility-button-two {//some unique css rules}

这是我想做的（我目前尝试过的）：

a[class^="utility-button"], a[class*=" utility-button"] {
    //some shared css rules

    &-one {
        //some unique css rules
    }
    &-two {
        //some unique css rules
    }
}

现在我知道从技术上讲，如果它编译会输出什么：

a[class^="utility-button"], a[class*=" utility-button"] { //some shared css rules}
a[class^="utility-button"]-one {//some unique css rules}
a[class^="utility-button"]-two {//some unique css rules}
a[class*=" utility-button"]-one {//some unique css rules}
a[class*=" utility-button"]-two {//some unique css rules}

这显然行不通。

有什么办法可以解决这个问题 - 不必为每个 <a> 标签添加两个类，我希望根据第二个类继承实用程序按钮样式。

Answer 1

父选择器不能这样使用，它只包含对前一个选择器的引用。 Sass 无法定位属性选择器的内容（至少，不在当前可用的任何字符串操作函数之外）。

您可以做的最好的事情是编写自定义函数或使用内容感知混合来为您处理变量的脏活。这是 mixin 版本的样子（假设您想继续使用嵌套）：

@mixin my-sel($append: false) {
    $class: if($append, selector-append(&, $append), &);
    @at-root a[class^="#{$class}"], a[class*=" #{$class}"] {
        @content;
    }
}


utility-button {
    @include my-sel {
        /* some shared css rules */
    }

    @include my-sel(-one) {
        /* some unique css rules */
    }
    @include my-sel(-two) {
        /* some unique css rules */
    }
}

输出：

a[class^="utility-button"], a[class*=" utility-button"] {
  /* some shared css rules */
}
a[class^="utility-button-one"], a[class*=" utility-button-one"] {
  /* some unique css rules */
}
a[class^="utility-button-two"], a[class*=" utility-button-two"] {
  /* some unique css rules */
}

如果您需要能够将其嵌套到其他选择器中，那么它会变得相当复杂：

@function class-to-attribute-selector($class) {
    // the following line is completely optional, but you definitely need the @return
    $class: if(str-index($class, '.') == 1, str-slice($class, 2), $class);
    @return #{'[class^="#{$class}"]'}, #{'[class*=" #{$class}"]'};
}

@mixin class-sel {
    $sel-list: &;

    $new-sel: ();
    @each $sel in $sel-list {
        @if length($sel) > 1 {
            $s: ();
            @for $i from 1 to length($sel) {
                $s: append($s, nth($sel, $i));
            }
            $class: nth($sel, length($sel));
            $new-sel: append($new-sel, selector-nest($s, class-to-attribute-selector($class)));
        } @else {
            $new-sel: join($new-sel, class-to-attribute-selector(nth($sel, 1)));
        }
    }

    @at-root #{$new-sel} {
        @content;
    }
}

.foo {
    .utility-button {
        @include class-sel {
            /* some shared css rules */
        }

        &-one {
            @include class-sel {
                /* some unique css rules */
            }
        }
        &-two {
            @include class-sel {
                /* some unique css rules */
            }
        }
    }
}

.bar {
    @include class-sel {
        /* other rules */
    }
}

输出：

.foo [class^="utility-button"], .foo [class*=" utility-button"] {
  /* some shared css rules */
}
.foo [class^="utility-button-one"], .foo [class*=" utility-button-one"] {
  /* some unique css rules */
}
.foo [class^="utility-button-two"], .foo [class*=" utility-button-two"] {
  /* some unique css rules */
}

[class^="bar"], [class*=" bar"] {
  /* other rules */
}