如何通过在Sass中嵌套向属性选择器添加附加信息？ [英] How can I add additional information to an attribute selector via nesting in Sass?

问题描述

我想避免class'itis，并利用SASS嵌套实现以下CSS输出：

I'm trying to avoid "class'itis" and leverage SASS nesting to achieve the following CSS output:

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}

d喜欢能够做（我目前尝试过的）：

This is what i'd like to be able to do (what i've currently tried):

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

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

现在我知道如果编译的话会输出什么是技术上的：

Now I know that what that would output if it compiled would technically be:

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}

这显然不会工作。

有任何方法 - 这将是真棒不必添加两个类到每个<$ c

Is there any way round this - it would be awesome not to have to add two classes to every <a> tag i wish to inherit the utility button styles depending on a second class.

推荐答案

$ c>

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

The parent selector cannot be used that way, it only contains a reference to the previous selector. Sass has no way of targeting the contents of an attribute selector (at least, not outside of whatever string manipulation functions are currently available).

你最好做的是编写自定义函数或使用内容感知混合来对变量进行脏工作。下面是一个mixin版本（假设你想要使用嵌套）：

The best you can do is either write a custom function or use a content aware mixin to do the dirty work for you with variables. Here's what a mixin version might look like (assuming you want to keep using nesting):

@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 */
}

能够嵌套到其他选择器，那么它变得非常复杂：

If you need to be able to nest this into other selectors, then it gets quite a lot more complicated:

@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中嵌套向属性选择器添加附加信息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！