CSS Processors have continually increased in usage for years. New tools and ways of automating styles have emerged along with mature tools establishing themselves into our workflow. With this, it’s easy to get lost among these tools. This talk will help to give a gentle introduction to stylesheets processors (pre and post) - what they do, how they help you and how to use them.

1. AUGMENTING
STYLESHEETS
Introduction to CSS processors
Tristan Ashley | @tawashley

2. WHO AM I?
➤ Front End Developer at Code Computerlove
➤ Been doing things on the web and front ends for 4+ years
➤ @tawashley

3. ERM, WHAT?

4. SUBTLETY CHANGING THE
WAY YOU WRITE AND
MANAGE STYLESHEETS TO
MAKE YOUR LIFE EASIER

5. HELP SUPER CHARGE
YOUR CSS

6. TYPES OF PROCESSORS
➤ Pre-processors
➤ Post-processors

7. WHY USE THEM?

8. BENEFITS OF USING PROCESSORS
➤ Helps reduce development time.
➤ Helps produce DRYer code.
➤ Add a heap of features to style authoring
➤ Engrained user base / ecosystems

10. PRE-PROCESSORS
Compile to CSS

11. PRE-PROCESSORS

12. FEATURE TICK OFF LIST
➤ Real @imports - file partials
➤ Simple reference of parent selector &.
➤ Variables.
➤ Built-in and custom functions.
➤ mixins
➤ Many more

14. @IMPORTS - CSS
@import('component1.css');
@import('component2.css');
@import('component3.css');
@import('component4.css');

15. @IMPORTS - SASS
@import('component1');
@import('component2');
@import('component3');
@import('component4');

16. VARIABLES
$c-primary: red;
$c-secondary: #f00;
$d-columns: 10;
$d-gutter: 12px;
$isRtl: true;
$d-gutter--double: $d-gutter*2;

17. VARIABLES CONT.
http://www.sassmeister.com/gist/7b15f388f34d3e8c69aaa10c2f6a0c74
$c-primary: red;
$d-gutter: 24px;
$d-gutter--double: $d-gutter*2;
body {
background: $c-primary;
}
.box-1 {
width: $d-gutter;
height: $d-gutter;
background: $c-primary;
}

18. VARIABLES CONT.
http://www.sassmeister.com/gist/7b15f388f34d3e8c69aaa10c2f6a0c74
$c-primary: red;
$d-gutter: 24px;
$d-gutter--double: $d-gutter*2;
body {
background: $c-primary;
}
.box-1 {
width: $d-gutter;
height: $d-gutter;
background: $c-primary;
}

19. VARIABLES CONT.
http://www.sassmeister.com/gist/7b15f388f34d3e8c69aaa10c2f6a0c74
$c-primary: red;
$d-gutter: 24px;
$d-gutter--double: $d-gutter*2;
body {
background: $c-primary;
}
.box-1 {
width: $d-gutter;
height: $d-gutter;
background: $c-primary;
}
body {
background: red;
}
.box-1 {
width: 24px;
height: 24px;
background: red;
}

20. VARIABLES INTERPOLATION
$alignment: left;
.flow-#{$alignment} {
position: absolute;
text-align: $alignment;
#{$alignment}: 0;
}
.flow-left {
position: absolute;
text-align: left;
left: 0;
}

21. PARENT SELECTOR
http://www.sassmeister.com/gist/0017308d572929833b2d8465afdc035e
.button {
background: red;
&:hover {
background: yellow;
}
&:before {
position: absolute;
background: black;
content: '';
width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.button {
background: red;
}
.button:hover {
background: yellow;
}
.button:before {
position: absolute;
background: black;
content: '';
width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

22. NESTING SELECTORS
.block {
font-size: 20px;
color: white;
&__element {
float: left;
width: 50%;
}
&--inverse {
color: black;
}
}
.block {
font-size: 20px;
color: white;
}
.block__element {
float: left;
width: 50%;
}
.block--inverse {
color: black;
}

23. NESTING SELECTORS CONT.
header {
nav {
li {
display: inline-block;
a {
background: white;
color: black;
}
}
}
}
header nav li {
display: inline-block;
}
header nav li a {
background: white;
color: black;
}

24. MIXINS
http://www.sassmeister.com/gist/adf4f9de4d923400572f00581bc8abb7
@mixin button-style($radius: 20px) {
border-radius: $radius;
@include text-ellipsis;
}
@mixin text-ellipsis($width: 200px) {
width: $width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.button {
@include button-style;
}
.button--extra-rounded {
@include button-style($radius: 35%);
}

25. MIXINS
http://www.sassmeister.com/gist/adf4f9de4d923400572f00581bc8abb7
@mixin button-style($radius: 20px) {
border-radius: $radius;
@include text-ellipsis;
}
@mixin text-ellipsis($width: 200px) {
width: $width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.button {
@include button-style;
}
.button--extra-rounded {
@include button-style($radius: 35%);
}
.button {
border-radius: 20px;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.button--extra-rounded {
border-radius: 35%;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

26. MIXINS CONT.
http://www.sassmeister.com/gist/adf4f9de4d923400572f00581bc8abb7
@mixin on-active {
&:hover,
&:active,
&:focus {
@content;
}
}
a {
background: black;
@include on-active {
background: white;
}
}
a {
background: black;
}
a:hover, a:active, a:focus {
background: white;
}

27. CUSTOM FUNCTIONS
http://www.sassmeister.com/gist/549afe8db08f61d31ef3e54ca0debe51
$d-btn-width: 100px;
$d-btn-height: 20px;
@function double($number) {
@return $number*2
}
.button {
width: double($d-btn-width);
height: $d-btn-height;
}
.button {
width: 200px;
height: 20px;
}

28. BUILT-IN FUNCTIONS
http://www.sassmeister.com/gist/5d03451a05ed13715806caefd248b529
sass-lang.com/documentation/Sass/Script/Functions.html
$c-primary: #f00;
.button {
background: $c-primary;
&:hover {
background: darken($c-primary, 20%);
}
&:active {
background: lighten($c-primary, 20%);
}
}
.button {
background: #f00;
}
.button:hover {
background: #990000;
}
.button:active {
background: #ff6666;
}

29. WELL, THIS ALL LOOKS
SWELL!

30. BUT...HOW DO I USE
SASS TODAY?

31. HOW YOU CAN USE SASS TODAY
➤ Install Ruby - http://rubyinstaller.org/
➤ Open command line program
➤ Run 'gem install sass'
➤ If this errors, instead run 'sudo gem install sass'
➤ After this, you're all ready to go!

32. GETTING ALL SASSY

33. RESOURCES
➤ http://www.sassmeister.com/
➤ Sass Playground
➤ https://sass-guidelin.es/
➤ Opinionated guide to using Sass
➤ http://hugogiraudel.com/

34. POST-PROCESSORS
Manipulate CSS files themselves

36. POST-PROCESSORS
➤ Help fill in the gap of Pre-processors.
➤ Can be used with a pre-processor
➤ Or...can do things a pre-processor can do.
➤ Healthy plugin ecosystem.

46. WELL, THIS ALL LOOKS
SWELL! (AGAIN)

47. BUT...HOW DO I USE
POSTCSS TODAY?

49. JAVASCRIPT API
var postcss = require('postcss');
postcss([ require('autoprefixer'), require('cssnano') ])
.process(css, { from: 'src/app.css', to: 'app.css' })
.then(function (result) {
fs.writeFileSync('app.css', result.css);
if ( result.map ) fs.writeFileSync('app.css.map', result.map);
});

50. GULP API
gulp.task('css', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
return gulp.src('src/**/*.css')
.pipe( sourcemaps.init() )
.pipe( postcss([ require('autoprefixer'), require('precss') ]) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest('build/') );
});

51. THANKS
Any questions?