McrFRED 39 | CSS Processors

AUGMENTING
STYLESHEETS
Introduction to CSS processors
Tristan Ashley | @tawashley

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

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

TYPES OF PROCESSORS
➤ Pre-processors
➤ Post-processors

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

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

@IMPORTS - CSS
@import('component1.css');

@IMPORTS - SASS
@import('component1');

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

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

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

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

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;
}

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;
}

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;
}

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%);
}

MIXINS
@mixin button-style($radius: 20px) {
border-radius: $radius;
@include text-ellipsis;
}
@mixin text-ellipsis($width: 200px) {
width: $width;
overflow: hidden;
}
.button {
@include button-style;
}
@include button-style($radius: 35%);
}
.button {
border-radius: 20px;
width: 200px;
overflow: hidden;
}
border-radius: 35%;
width: 200px;
overflow: hidden;
}

MIXINS CONT.
@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;
}

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;
}

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

BUT...HOW DO I USE
SASS TODAY?

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!

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

POST-PROCESSORS
Manipulate CSS ﬁles themselves

POST-PROCESSORS
➤ Help ﬁll 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.

WELL, THIS ALL LOOKS
SWELL! (AGAIN)

BUT...HOW DO I USE
POSTCSS TODAY?

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);
});

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/') );
});

McrFRED 39 | CSS Processors

More Related Content

What's hot (20)

Similar to McrFRED 39 | CSS Processors (20)

Recently uploaded (20)

McrFRED 39 | CSS Processors