Cascading style sheet preprocessors Less and Sass emerged from the need to enhance the capabilities of CSS. It does not contain any variables for example. Less and Sass allow frontend developers take advantage of variables and other features that are syntactically familiar. The following code is an example of standard CSS. The DOM elements p and li (paragraph and list item respectively), and any element with a post class will have a font-family Arial, with sans-serif as a fallback and black as its color:

p, li, .post {
  font-family: Arial, sans-serif;
  color: #000;
}

Next, using the Sass CSS pre-processor, both the font-family and text color will be substituted with two variables: $text-font and $text-color. This allows easy maintenance when changes are needed. Also, the variables may be shared. The code is as follows:

$text-font:    Arial, sans-serif;
$text-color: #000;

p, li, .post {
  font: 100% $text-font;
  color: $text-color;
}
h2 {
  font: 2em $text-font;
  color: $text-color;
}

The Less preprocessor uses @ instead of $; therefore, its syntax looks more like an annotation than a php variable:

@text-font:    Arial, sans-serif;
@text-color: #000;

p, li, .post {
  font: 100% @text-font;
  color: @text-color;
}
h2 {
  font: 2em @text-font;
  color: @text-color;
}

There is an extra step that needs to be performed, since it will not be interpreted by a browser engine. The added step is to compile the Less or Sass code into real CSS. This introduces extra time in the development phase; thus, Elixir helps by automating the process.

In the previous Laravel Elixir example, the less function took only the filename, app.less, as its sole argument. Now, the example should be a bit clearer. Also, less may take an array of arguments that will be compiled.

The less method searches in /resources/assets/less and the output will be placed in public/css/ by default:

elixir(function(mix) {
    mix.less([
        'style.less',
        'style-rtl.less'
    ]);
});

CoffeeScript is a programming language that compiles into JavaScript. Like Less and Sass, its goal is to simplify or extend the functionality of the language that it compiles to. In the case of CoffeeScript, it simplifies Javascript by requiring less keystrokes. In the following JavaScript code, two variables—an array and an object—are created:

var available, list, room;

room = 14;

available = true;

list = [101,102,311,421];

room = { 
  id: 1,
  number: 102,
  status: "available"
}

In the following CoffeeScript code, the syntax is very similar, but there is no semicolon required and there is no need for var to create a variable. Also, indentation is used to define the object's attributes. The code is as follows:

room = 14

available = true 

list = [101,102,311,421]

room = 
  id: 1
  number: 102
  status: "available"

In this CoffeeScript example, there are only a few less characters; however, for a programmer, less keystrokes can help increase speed and efficiency. To add the coffee compiler to Elixir, simply use the coffee function, as shown in the following code:

elixir(function(mix) {
    mix.coffee([
        'app.coffee'
    ]);
});

The following table shows the mapping between preprocessor, language, function, and where each function expects the source to be. The last column on the right shows the directory and/or name of the resultant combined file.

Optionally, each method takes a second parameter that will override the default location. To use a different directory, (in this case, a directory called app), simply add the directory as a second parameter:

mix.scripts(null,'public/app/js').styles(null,'public/app/css'),

In this example, the files will be saved at public/app/jsand public/app/css.

Finally, let's put everything together to draw an interesting conclusion. Since CoffeeScript scripts and less and sass files are not merged but copied into the destination directly, we first save the CoffeeScript, less, and sass files into the directories where Elixir expects the JavaScript and CSS files to be. Then, we instruct Elixir to merge and minify all of the JavaScript and CSS files into two merged and minified files. The code is as follows:

elixir(function(mix) {
    mix.coffee(null,'resources/assets/js')
        .sass(null,'resources/assets/css')
        .less(null,'resources/assets/css')
        .scripts()
        .styles();
});