从sass函数调用sass mixins

Question

我有一个生成选择器名称的sass混入：

@mixin rocks($name){
  #{$name}-rocks {
    @content;
  }
}

通过调用mixin调用：

@include rocks(dave){
  color: red;
}

我想创建一个自定义函数来为我调用这个混入，以将语法简化为：

rocks(dave){
  color: red;
}

是否可以在选择器之外调用sass @函数？2.从其中调用混入？大致是这样的：

@function rocks($name){
  @include @rocks($name)
}

如果可能的话，我更喜欢自定义的sass函数而不是自定义的ruby函数。谢谢!

Answer 1

不，也不是。Sass中的函数只能返回值，不能用于创建CSS。这就是混入的用途:创建混入来调用其他混入。

Answer 2

@function class($name) {
  @return $name;
}

@mixin className($classname) {
  .#{class($classname)} {
    @content;
  }
}

@mixin concatinate($classname2) {
  &.#{class($classname2)} {
    @content;
  }
}

@mixin parent($classname1) {
  .#{class($classname1)} & {
    @content;
  }
}

@mixin withparent($classname1) {
  @at-root .#{class($classname1)}#{&} {
    @content;
  }
}

@include className(red) {
  color: red;

  @include className(check) {
    color: green;

    @include concatinate(bcd) {
      color: green2;

      ul {
        li {
          color: red;

          & {
            color: blue;
          }

          @include withparent(colorwe) {
            display: none;
          }
        }
      }

      @include parent(efg) {
        color: green1;
      }
    }
  }


  @include className(blue) {
    color: blue;
  }
}

Answer 3

@DonaldDuck感谢您的反馈。就我个人而言，我认为没有必要通过混入调用选择器，如果有人尝试这样做，它将通过使用这些混入来解决。

例如：

//call a class
@include className(one) { 
  properties..
}//o/p    .one { properties..}
//add another class with existing one
@include className(one) {
  @include concatinate(two) {
    @include className(three) {
      properties...
    }
  }
}//o/p   .one.two .three { properties...}
//add parent to hierarchy
@include className(one) {
  @include parent(two) {
    properties..
  }
}//o/p .two .one { properties..}
//add class with top of the hierarchy
@include className(one) {
  @include className(two) {
    @include withparent(three) {
      properties...
    }
  }
} o/p  .one.three .two { properties..}