如何使用css通配符选择器并使用通配符值作为属性与scss [英] How can I use css wildcard selectors and use the wildcard value as an attribute with scss

问题描述

我有一个设置，我想在scss中选择基于部分类的元素。

我知道通配符选择器，我可以使用 div [class * =' - suffix'] 然而在类定义中，我想使用通配符值。例如：

 。{prefix} -glyph 
 {
 @include mymixin（{prefix}） 
} 
  

其中{prefix}是我希望匹配的通配符前缀。 p>

这是否可能？

解决方案

不明白你为什么要这样做？它需要更多的输入：

Mixin

  @mixin myMixin name）{
 
。＃{$ name} -name {
 @content; 
} 
} 
  

使用

  @include myMixin（class）{
 //你的风格
}; 
  

输出

  .class-name {
 //您的样式
} 
  

I have a set up where I'd like to select elements based on partial class in scss.

I know of the wildcard selector which I could use div[class*='-suffix'] however within the class definition, I'd like to use that wildcard value. For example:

.{prefix}-glyph
{
   @include mymixin({prefix})
}

Where {prefix} is the wildcard prefix I wish to match against.

Is this possible?

解决方案

What you are trying to do, though don't see why you would want to do this? Its requires more typing:

Mixin

@mixin myMixin($name) {

  .#{$name}-name {
      @content;
  }
}

Usage

@include myMixin(class) {
    // YOUR STYLES
};

Output

.class-name {
    // YOUR STYLES
}

这篇关于如何使用css通配符选择器并使用通配符值作为属性与scss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！