Chapter 2. Creating Variables and Mixins

A question: how often have you created components such as buttons, where you've used very similar colors multiple times throughout your code? It's a real pain to manually alter. Using a preprocessor such as SASS or Less makes it easier, but with the overhead of a full-sized library.

Can we do it differently? Absolutely; throughout the next few chapters, we'll explore different elements of PostCSS, before pulling it all together to produce a preprocessor application later in the book. We'll begin our journey with a look at using variables and mixins; we'll explore the basics of creating them first, before transitioning to support using PostCSS. In this chapter, we'll cover the following topics:

An overview of creating variables and mixins using existing preprocessors
Transitioning to using PostCSS equivalents
Adding mixin support to PostCSS
Examining the differences between standard preprocessors and PostCSS

Let's get cracking!

Introducing variables and mixins

So far, we've covered the basics of installing and configuring PostCSS—although there are a few steps involved, it's an easy process to get started with using the processor. To really get to know it though, there is no substitute for using it in anger; it's amazing how much you can automate, with just a little care and planning!

Let's put that to the test and use it to create a couple of simple examples using variables, functions, and mixins. We'll start with creating the original version using SASS, before converting it to use PostCSS plugins. The demos do assume a level of prior knowledge around using SASS, so if you are at all unfamiliar, then you may like to refer to my book, SASS Essentials, available from Packt Publishing.

Note

A word of note: we will make good use of the project folders we created back in Chapter 1, Introducing PostCSS, where src will be our in-tray, and dest will contain the compiled code. Make sure you have this open in a window somewhere on your desktop!

Okay, the first step in this process is to get SASS installed, so let's take a look at that now.

Setting up SASS

Setting up SASS is really easy when using Gulp; we can use the same format of command to install it as we do for other plugins. The source code for the plugin is available at https://github.com/dlmanning/gulp-sass; it's a lightweight frontend for node-sass, which in turn is a Node binding for the C+ library, libsass.

Let's dive in and take a look at getting it installed:

We start, as usual, with Node. Fire up a Node.js command prompt session, then change to the working directory.
At the command prompt, enter the following, then press Enter:
```
npm install --save-dev gulp-sass
```
If all is well, we should see something akin to this screenshot:

Before we continue, though, I would recommend clearing out or saving the contents of the dest folder elsewhere for safe keeping, after each exercise:

Next up, open a copy of gulpfile.js in Sublime Text; we need to make a number of changes, beginning with adding a reference to the gulp-sass plugin (as highlighted):
```
var reporter = require('postcss-reporter');
var sass = require('gulp-sass');
```
SASS will, by default, produce code in unminified format; the addition of {outputStyle: 'compressed'} in the task will automatically compress the output code. This makes this line redundant, so go ahead and remove it:
```
var cssnano = require('cssnano');
```
We also need to remove the reference to cssnano on or around line 19, so go ahead and remove this line:
```
.pipe(postcss([ cssnano ]))
```

On or around line 10, change the name of the styles task to autoprefixer and the dependency name to lint-styles:

gulp.task('autoprefixer', ['lint-styles'], function() {
return gulp.src('src/*.css')

Then remove these two lines:

.pipe(sourcemaps.init())
.pipe(sourcemaps.write('maps/'))

In the rename task, modify the rename task to match this:

gulp.task('rename', ['lint-styles'], function () {
  return gulp.src('dest/*.css')
    .pipe(rename('style.min.css'))
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('maps/'))
    .pipe(gulp.dest("dest/"));
});

On or around line 25, we need to add in the lint-styles task—go ahead and add in this block of code, which will check our styles for consistency:

gulp.task("lint-styles", ['sass'], function() {
  return gulp.src("src/*.css")
    .pipe(postcss([ stylelint({
      "rules": {
        "color-no-invalid-hex": 2,
        "declaration-colon-space-before": [2, "never"],
        "indentation": [2, 2],
        "number-leading-zero": [2, "always"]
      }
    }),
    reporter({
      clearMessages: true,
    })
  ]))
});

We're almost done. Add in the next task; this tells Gulp about how we should compile any SASS files presented to the task runner:

gulp.task('sass', function () {
  gulp.src('src/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('src/'));
});

We need to make a couple more changes. The key task that fires off a call to each of the sub tasks needs to be updated, to reflect the changes to our tasks:
```
gulp.task('default', ['sass', 'lint-styles', 'autoprefixer', 'rename']);
```
Our last change is to alter the watch facility to check for SASS files, and not pure CSS; go ahead and change the configuration object as shown:
```
var watcher = gulp.watch('src/*.scss', ['default']);
```

At this point, we have set up our processor to compile SASS files to valid CSS. We can prove this by compiling any SASS file. If all is well, our processor will produce valid style sheets and accompanying source map files automatically. Let's put this to the test as part of our next exercise, where we create an intriguing hover effect for images.

Previous Chapter

Summary

Next Chapter

Creating a hover effect example

Table of Contents for Mastering PostCSS for Web Design

Chapter 2. Creating Variables and Mixins

Introducing variables and mixins

Note

Setting up SASS

Table of Contents for
Mastering PostCSS for Web Design