CODEWITHSUNDEEP
csssassmixinscompass-sass
Nim
Nim

Reputation: 71

SASS user-select mixin without import - compass

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

Upvotes: 7

Views: 2802

Answers (2)

Flint
Flint

Reputation: 1691

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

Upvotes: 0

Ben Kalsky
Ben Kalsky

Reputation: 148

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

Upvotes: 4

Related Questions