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

Question

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?

Answer 1

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.