Introduction


Mixture handles compilation automatically for Sass, Less, Stylus and CoffeeScript. We've also introduced our own type "Mix" which simply extends the functionality of standard script and style files, allowing you to combine in a similar way to using the import functions of Sass or Less.

Locations


Mixture will only preprocess files within your project if they are defined within the "preprocessorLocations" setting.

Please see the Mixture section and settings.

Stylesheet Assets


Referencing assets from a stylesheet (css, less, sass, styl)

We recommened using relative paths

Example: ../images/my-image.jpg

Mixture will attempt to update absolute paths when converting to HTML or Publishing.

If using Compass you can adjust the "compass/config.rb" so as all generated paths are relative.

Sass (Ruby)


Sass files are automatically handled by Mixture. Imports are automatically detected and only the parent file is compiled.

The Ruby implementation of Sass is the default in Mixture, but you change to "libsass" as detailed below by updating the Sass settings in the Mixture Json settings file. We will eventually default to the "libsass" version.

You can control the location of the output files via the Mixture settings file and preprocessorStyleOutput. A minified version of the file will also be output with .min. appended to the name. The extension that indicates a Sass file is: .sass or .scss.

A note about Imports & Partials:

Mixture will not compile partials, a partial is denoated by an underscore at the beginning eg _myfile.scss.

If you import a file which is not a partial Mixture will automatically work out the dependancy and only compile the parent file, however if a file is added without a parent then the file will be compiled.

When calling a partial in Sass / Scss you do not need to enter "_" or the extension eg @import "myfile";

Sass settings

You can adjust the Sass settings via the Mixture settings file, please be aware that these settings do not affect compass (please see the compass section below which explains how compass is managed).

Example settings:

"sass": {
  "outputStyle": "nested",
  "sourceMap": false,
  "cache": false,
  "lineNumbers": false,
  "debugInfo": false,
  "globbing": false,
  "useLibSass": false
}

Mixture currently implements version 3.4.9, you can view more on Sass at http://sass-lang.com. You can use any version of Sass / Gems & Plugins with Mixture by pointing Mixture at your own Ruby install: Read more on setting up Mixture with a custom Ruby install.

Mixture supports Sass Globbing but currently only in the non-libsass version.

Sass (libsass)


Sass files are automatically handled by Mixture. Imports are automatically detected and only the parent file is compiled.

You can control the location of the output files via the Mixture settings file and preprocessorStyleOutput. A minified version of the file will also be output with .min. appended to the name. The extension that indicates a Sass file is: .sass or .scss.

A note about Imports & Partials:

Mixture will not compile partials, a partial is denoated by an underscore at the beginning eg _myfile.scss.

If you import a file which is not a partial Mixture will automatically work out the dependancy and only compile the parent file, however if a file is added without a parent then the file will be compiled.

When calling a partial in Sass / Scss you do not need to enter "_" or the extension eg @import "myfile";

Sass settings

You can adjust the Sass settings via the Mixture settings file, please be aware that these settings do not affect compass (please see the compass section below which explains how compass is managed).

Example settings:

"sass": {
  "outputStyle": "nested",
  "sourceMap": false,
  "lineNumbers": false,
  "useLibSass": true
}

Please note: when using source maps in Mixture you should also turn on "debug" in the Mixture settings file - this stops Mixture from attempting to always load the minified js or css file which would not contain the sourcemap information.

Compass + Sass


If you wish to use Compass to manage your Sass files you can!

Simply update the setting useCompass to true, this will stop Mixture handling Sass and allow Compass to take over, Mixture will still display validation warnings.

When Compass is activated on a project a compass config file .compass/config.rb will be created in the root of your project and you will be notified to make some quick adjustments which will tell Compass about your project. Please open the file and follow the comments.

Mixture currently implements version 1.0.1. Learn more about Compass at http://compass-style.org/

SourceMap can be activated in the config.rb file - please refer to the compass docs.

Plugins

You can install and use compass plugins & frameworks with Mixture. We have put together some documentation on getting started.

Mixture supports Sass Globbing.

Less


Less files are automatically handled by Mixture. Imports are automatically detected and only the parent file is compiled.

You can control the location of the output files via the Mixture settings file and preprocessorStyleOutput. A minified version of the file will also be output with .min. appended to the name. The extension that indicates a Less file is: .less.

A note about Imports & Partials:

Mixture will not compile partials, a partial is denoated by an underscore at the beginning eg _myfile.less.

If you import a file which is not a partial Mixture will automatically work out the dependancy and only compile the parent file, however if a file is added without a parent then the file will be compiled.

When calling a partial in Less you do not need to enter the extension eg @import "_myfile";

Mixture currently implements version 2.1.1 Learn more about Less at http://lesscss.org/

Less settings

You can adjust the Less settings via the Mixture settings file.

Example settings:

"less": {
  "sourceMap": false,
  "lineNumbers": false
}

Please note: when using source maps in Mixture you should also turn on "debug" in the Mixture settings file - this stops Mixture from attempting to always load the minified js or css file which would not contain the sourcemap information.

CoffeeScript


CoffeeScript files are automatically handled by Mixture.

You can control the location of the output files via the Mixture settings file and preprocessorScriptOutput. A minified version of the file will also be output with .min. appended to the name. The extension that indicates a CoffeeScript file is: .coffee.

If you would like your coffeescript files compiled "bare" you can do so by adding .bare. to the original file name. The word bare will be stripped from the output file.

Mixture currently implements version 1.8.0. Learn more about CoffeeScript at http://coffeescript.org/

Stylus


Stylus files are automatically handled by Mixture.

You can control the location of the output files via the Mixture settings file and preprocessorStyleOutput. A minified version of the file will also be output with .min. appended to the name. The extension that indicates a Stylus file is: .styl.

A note about Imports & Partials:

Mixture will not compile partials, a partial is denoated by an underscore at the beginning eg _myfile.styl.

If you import a file which is not a partial Mixture will automatically work out the dependancy and only compile the parent file, however if a file is added without a parent then the file will be compiled.

When calling a partial in Stylus you do not need to enter the extension eg @import "_myfile";

Mixture currently implements version 0.49.3. Learn more about Stylus at http://learnboost.github.com/stylus

Mix (a custom Mixture type)


Mix files are simply .js or .css files with .mix. in the file name. A mix file simply extends the functionality of a normal style or script file and allows you to import and combine.

You can control the location of the output files via the Mixture settings file and preprocessorStyleOutput.

A minified version will also be output with .min. appended to the name.

Example style.mix.css:

@import "another-style-file";
@import "common/reset";
@import "common/clearfix.css";

The above will combine all 3 files into the output file style.css, a minifed version will also be created.

Note: If you do not add the extension eg @import "style" Mixture will look for the file _style.css.

Script files work in the same way and have their own setting preprocessorScriptOutput.

We recommend you use ; to terminate the import as shown above.

Base64 Automatically


Mixture can convert stylesheet asset paths to inline base64, this logic can be used by files with the following extensions css, less, sass, scss, styl. Watch a demonstration.

Example:

.my-class {
  background-image: inline-image('../img/myimage.png');
  background-repeat: no-repeat;
}

If the image is found then the above will automatically be converted like so (example):

.my-class {
  background-image: url(data:image/png;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5...);
  background-repeat: no-repeat;
}

If you are using Compass then this will be handled via Compass instead of Mixture.

Autoprefix


Mixture has support for Autoprefixer, please see the Autoprefix section.