user-select mixin/placeholder

user-select.scss

// attributes: none | text | all | element
// Only call for mixin within media querys, otherwise use placeholder!

@mixin user-select($val: none) {
  -webkit-touch-callout: $val;
  @include prefix(user-select, $val);
}

%user-select-none { @include user-select(none); }
%user-select-text { @include user-select(text); }
%user-select-all { @include user-select(all); }
%user-select-element { @include user-select(element); }

// usage
.skinny-heading {
  color: white;
  font: { 
    size: 64px;
    size: 4rem;
    weight: 200;
  }
  @extend %user-select-none;
}