If we're altering code to use PostCSS for the first time, it naturally makes sense to start with something simple; incorporating variables and mixins into our code is the perfect place to begin.
For this next exercise, we're going to create a handful of variables to store some values, then add a mixin to handle styles for the fonts used in the demo. Let's make a start:
1. We'll start by opening up a copy of gulpfile.js from the root of our project area—we first need to make some changes to accommodate using the new plugin.
2. In gulpfile.js, add this line immediately below the first block of var statements—this should be on or around line 9:
var cssvariables = require('postcss-css-variables');
3. We now need to make some changes to our gulp task file—we'll start with the simplest, which is to remove the var reference to SASS, as we will no longer need it:
var sass = require('gulp-sass');
Now that we have a reference to the postcss-css-variables plugin, we need to make use of it in our tasks. Go ahead and amend the highlighted lines of code in the autoprefixer task, as indicated; this also removes the dependency on the lint-styles task, as this is no longer needed:
gulp.task('autoprefixer', function() { return gulp.src('src/*.css')
.pipe(postcss([ autoprefixer, cssnano, cssvariables(/* options */) ]))
.pipe(gulp.dest('dest/'));
4. Note that we've also reinstated the cssnano command—you will also need to add this line in as a variable declaration, as indicated:
var rename = require('gulp-rename');
var cssnano = require('cssnano');
5. A little further down, on or around line 25, change the code as highlighted, as we will no longer use SASS to compile our code; we can tweak the order in which each task is run:
gulp.task("lint-styles", ['autoprefixer'], function() { 6. Next up, we can remove the SASS task in its entirety:
gulp.task('sass', function () { gulp.src('src/*.scss')
.pipe(sass({outputStyle: 'compressed'}) .on('error', sass.logError))
.pipe(gulp.dest('src/'));
});
7. Toward the end of the file, go ahead and alter the default task as indicated—
we don't need to call the SASS task, as it has now been removed:
gulp.task('default', ['lint-styles', 'autoprefixer', 'rename']);
8. Alter the gulp.watch command to look for plain CSS files in the src folder—
we're not using SASS, so the reference to scss format files is now invalid and needs to be changed:
var watcher = gulp.watch('src/*.css', ['default']);
watcher.on('change', function(event) {
At this point, if all is well, we should have a working gulp task file that we can now use to compile our code. Let's go ahead and start to convert the code in our orchid demo, to use PostCSS:
9. We'll start by saving a copy of the Tutorial2 folder from the code download that accompanies this book, locally, to within the project area we created under c:\wamp\www, back in Chapter 1, Introducing PostCSS.
10. Open up a copy of style.css from within the src folder of the Tutorial2 folder. At the top of the file, remove lines 1 to 14 (the variables and mixin code), so that the file starts with the font-face declaration.
11. In its place, add the following lines—these are the replacement variable indicated—note the syntax used for the var statements; this is not the same as standard SASS. We've changed it to the format supported by the postcss-css-variables plugin:
13. We added the --fullsize variable at the top of our style sheet—let's make use of it now and update the img rule accordingly:
img {
width: var(--fullsize);
height: var(--fullsize);
}
14. The final change we will make is to the .info class—go ahead and alter the background attribute as indicated:
/* --- Hover Effect Styles --- */
.info {
background: var(--very-dark-gray);
}
Our code changes are complete, so go ahead and save the file—once done, fire up a NodeJS command prompt, and change to the project working area.
15. Save the file as styles.css into the src folder of our project area.
16. Switch to the NodeJS command prompt, then enter the usual command at the prompt, and press Enter:
gulp
17. Copy the compiled code back to the css folder within Tutorial2. If all is well, when we preview the results in a browser, we should see our demo continue to work as shown at the start of the first part of this exercise.
Phew, there were a fair few steps there! There is a copy of the completed stylesheets, both prior to and post compilation, available in the code download that accompanies this book: they can be found in the css | completed folder. You will need to rename the two style sheet files to just style.css for them to work correctly.
If you want to see the effects of compiling variables, without committing changes to code, then have a look at the playground offered with this plugin, at https://
madlittlemods.github.io/postcss-css-variables/playground/. It's a great way to get accustomed to using the postcss-css-variables plugin, before diving in and editing production code.
Okay, let's change tack; we've covered a number of key concepts in our demo, so let's take a moment to let the proverbial dust settle, and explore what we've learned through the demo.