css - 如何通过嵌套在 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 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 */
}