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

Posted 2023-03-06

【中文标题】没有导入的 SASS 用户选择混合 - 指南针

【英文标题】：SASS user-select mixin without import - compass

【发布时间】：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 和占位符在媒体查询中不起作用

【参考方案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 完美地为我工作。谢谢。