Question

我试图避免＆＃34; class＆＃39; itis＆＃34;并利用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 */
}

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

1 个答案: