SASS用户选择混入，无需导入-指南针

Question

我在用指南针研究SASS。我已经创建了一些混入，但仍然有一个混入无法正常工作。这是用户选择的。我知道我可以使用@import“compass/css3/user-interface”导入它；但这不是重点。为什么我的‘手工’@mixin用户选择($value){..}似乎不起作用？有什么已知的原因吗？

@mixin user-select($value) {
  -webkit-user-select: $value; 
  -moz-user-select: $value; 
  -ms-user-select: $value; 
  -o-user-select: $value; 
  user-select: $value;    
}

.myclass {
  @include user-select(none);
}

Answer 1

对我来说似乎很好..您可以尝试此方法：

@mixin user-select($select) {
  @each $pre in -webkit-, -moz-, -ms-, -o- {
    #{$pre + user-select}: #{$select};
  } 
  #{user-select}: #{$select};
}

.myclass {
  @include user-select(none);
}

Answer 2

您甚至可以进一步推广这一步。

    $PREFIXES: -webkit-, -moz-, -ms-, -o-, '';
    
    @mixin prefix-template($var, $value, $prefixes:$PREFIXES) {
        @each $pre in $prefixes { #{$pre + $var}: #{$value};  }
    }
    
    @mixin user-select($value) {
      @include prefix-template(user-select, #{$value});
    }
   
    @mixin animation($value) {
      @include prefix-template(animation, #{$value});
    }