SASS user-select mixin without import - compass

Question

I'm working on SASS with compass. I've already created some mixins but still, there is one mixin I can't make it to work. That's the user-select one. I know I can import it using @import "compass/css3/user-interface"; but that's not the point. Why my 'handmade' @mixin user-select($value){..} does not seem to work? Is there any known reason?

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

Would be maybe helpful if you edit your question and add your full mixin code. — pzin, Apr 29 '14 at 09:55
The mixin looks correct, so the problem probably lies elsewhere. Make sure you define the `@mixin` before you `@include` it. Do you get an error when you compile it? — Nils Kaspersson, Apr 29 '14 at 10:18
@NilsKaspersson that made the trick. Did not knew I had to define the mixins before including, sry. Thanks to everyone, cheers. — Nim, Apr 29 '14 at 10:45
Are you trying to use the mixin within a media query? If so mixins and placeholders do not work within media queries — Crystal, Jan 03 '17 at 17:31

Ben Kalsky · Answer 1 · 2017-01-08T09:37:39.243

4

Seems to work fine for me.. You can try this approach:

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

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

edited Jan 08 '17 at 09:37

answered Dec 29 '16 at 10:33

Ben Kalsky

148
2
16

1

Working perfectly for me with Webpack. Thanks. – Yevgeniy Afanasyev Jan 30 '18 at 23:17

Flint · Answer 2 · 2020-08-25T22:53:34.090

You may even generalize this one step further.

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

SASS user-select mixin without import - compass

2 Answers2