CODEWITHSUNDEEP
csssasscompass-sass
Jamie Hutber
Jamie Hutber

Reputation: 28064

Compass: Syntax error: Undefined mixin 'user-select'

I get the follow error when trying to use the mixin 'user-select'. I'm using version 0.12.2 which I'm pretty sure supports user-select from compass. So why can't I use this mixin?

Error

 Syntax error: Undefined mixin \'user-select\'

Includes

// css3
    @import "compass/css3";
    @import "partials/deposit";

Call

//File: partials/_deposit.scss
@include user-select(none);

So why can't I use this mixin?

Upvotes: 5

Views: 13594

Answers (1)

RaphaelDDL
RaphaelDDL

Reputation: 4480

From the @import "compass/css3/", this is the list of the imported things:

  • Appearance – Specify the CSS3 appearance property.
  • Background Clip – Specify the background clip for all browsers.
  • Background Origin – Specify the background origin for all browsers.
  • Background Size – Specify the background size for all browsers.
  • Border Radius – Specify the border radius for all browsers.
  • Box – This module provides mixins that pertain to the CSS3 Flexible Box.
  • Box Shadow – Specify the box shadow for all browsers.
  • Box Sizing – Specify the box sizing for all browsers.
  • Columns – Specify a columnar layout for all browsers.
  • Filter – Specify the (image) filter for all browsers.
  • Font Face – Specify a downloadable font face for all browsers.
  • Hyphenation – Mixin for breaking space and injecting hypens into overflowing text
  • Images – Specify linear gradients and radial gradients for many browsers.
  • Inline Block – Declare an element inline block for all browsers.
  • Opacity – Specify the opacity for all browsers.
  • CSS Regions – Specify CSS Regions for supported browsers.
  • Text Shadow – Specify the text shadow for all browsers.
  • Transform – Specify transformations for many browsers.
  • Transition – Specify a style transition for all browsers.

From this, we can say that Compass User Interface (css3/user-interface) isn't bundled with compass/css3 thus you need to call it also, after the css3 call:

@import "compass/css3"
@import "compass/css3/user-interface"
//other imports

Update

Compass 0.13.alpha.10 onwards

Looks like the 0.13.alpha.10 Compass imports user-interface as well since the documentation page was updated:

  • User Interface – Declare an element inline block for all browsers.

Also was added animation as well:

  • Animation – Specify the CSS3 animation property and all its sub-properties.

Therefore just @import "compass/css3" is enough now.

Upvotes: 21

Related Questions