没有导入的 SASS 用户选择混合 - 指南针答案

【问题标题】：SASS user-select mixin without import - compass没有导入的 SASS 用户选择混合 - 指南针
【发布时间】：2014-06-15 03:56:15
【问题描述】：

我正在使用指南针开发 SASS。我已经创建了一些 mixin，但仍然有一个 mixin 我无法使其工作。那是用户选择的一个。我知道我可以使用 @import "compass/css3/user-interface" 导入它；但这不是重点。为什么我的“手工制作”@mixin user-select($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);
}

【问题讨论】：

您是否为用户选择使用了适当的前缀？
如果您编辑问题并添加完整的混合代码，可能会有所帮助。
mixin 看起来是正确的，所以问题可能出在其他地方。确保在 @include 之前定义 @mixin。编译的时候会报错吗？
@NilsKaspersson 成功了。不知道我必须在包含之前定义 mixins，sry。谢谢大家，干杯。
您是否尝试在媒体查询中使用 mixin？如果是这样，mixin 和占位符在媒体查询中不起作用

标签： css sass mixins compass-sass

【解决方案1】：

您甚至可以进一步概括这一点。

    $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});
    }

【讨论】：

【解决方案2】：

对我来说似乎工作得很好.. 你可以试试这个方法：

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

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

【讨论】：

使用 Webpack 完美地为我工作。谢谢。