AWDG: Preprocess All the Things!

PREPROCESS
ALL THE THINGS!
An Introduction to CSS Preprocessors
·
Chris Harrison @cdharrison
Atlanta Web Design Group · 6 Feb 2014
0

View Slide

Hi, I'm Chris!
Made my first website in 1996
Front-End Designer/Developer for
Organizer/Founder of
Co-Founder/Member of
Adobe Influencer
Morris
RefreshAugusta
TheClubhou.se

View Slide

HASHTAG ALL THE THINGS!
#AWDGCSS

View Slide

View Slide

Before CSS
The look of elements was controlled via inline attributes:

<
f
o
n
t c
o
l
o
r
=
"
#
f
f
e
1
0
0
" s
i
z
e
=
"
2
" f
a
c
e
=
"
P
a
p
y
r
u
s
"
>


2 L
E
G
I
T 2 Q
U
I
T




H
E
Y H
E
Y

<
/
f
o
n
t
>

In short: it was painful to author/maintain.

View Slide

And then CSS happened.
And we were able to use like this...

Z
O
M
G
O
S
H
.

(Which wasn't much better than inline
attributes.)

View Slide

Or this...
(Via Inline Stylesheets)
<
s
t
y
l
e
>
<
/
s
t
y
l
e
>

Z
O
M
G
! N
o i
n
l
i
n
e s
t
y
l
e
s
?
! D
O
U
B
L
E R
A
I
N
B
O
W
!

p
{
c
o
l
o
r
: #
f
f
e
1
0
0
;
f
o
n
t
-
s
i
z
e
: 2
;
f
o
n
t
-
f
a
m
i
l
y
: P
a
p
y
r
u
s
;
}

View Slide

Or this...
Where we finally separated style from content
via external stylesheets!
<
s
t
y
l
e
>
<
/
s
t
y
l
e
>

Z
O
M
G
! N
o s
t
y
l
e
s i
n m
y H
T
M
L
?
! D
O
U
B
L
E R
A
I
N
B
O
W
!

@
i
m
p
o
r
t u
r
l
(
/
m
y
/
a
w
e
s
o
m
e
/
s
t
y
l
e
s
h
e
e
t
.
c
s
s
)
;
It was magical, trust me.

View Slide

But CSS is far from perfect.
No variables
Multiple HTTP Requests
Non-Reusable
PITA Browser Prefixes

View Slide

Fortunately,
there's a better way!

View Slide

But first, a Disclaimer:
CSS Preprocessors won't fix
terrible CSS.

View Slide

What's a CSS Preprocessor?
CSS Preprocessors compile the CSS we write in a processed language
into the pure CSS syntax we're all used to.

View Slide

Why use a CSS Preprocessor?
Frameworks, Variables, Mixins
Modular, Reusable, Extendable CSS
DRY Syntax (Don't Repeat Yourself)
And...

View Slide

If you can write CSS, you can
write LESS, Sass, or Stylus.

View Slide

Popularity of CSS Preprocessors
Sass 5%
Scss 13%
LESS 23%
Stylus 3%
I don't like any of them 7%
I don't have a preference 2%
I've never tried any of them 46%
Other 1%
[June 2012] CSS Tricks: Popularity of CSS Preprocessors — hrrsn.me/TmDg

View Slide

View Slide

LESS
Written in Javascript, LESS extends CSS with dynamic behaviors like
variables, mixins, operations, and functions.
- couple with l
e
s
s
.
j
s you can embed just like CSS.
lesscss.org

View Slide

Basic LESS Usage
<
l
i
n
k r
e
l
=
"
s
t
y
l
e
s
h
e
e
t
/
l
e
s
s
" t
y
p
e
=
"
t
e
x
t
/
c
s
s
" h
r
e
f
=
"
s
t
y
l
e
s
.
l
e
s
s
"
>
<
s
c
r
i
p
t s
r
c
=
"
l
e
s
s
.
j
s
" t
y
p
e
=
"
t
e
x
t
/
j
a
v
a
s
c
r
i
p
t
"
>
<
/
s
c
r
i
p
t
>

View Slide

View Slide

Sass
Written in Ruby, Sass also extends CSS by adding nested rules, variables,
mixins, functions, and much more. Two syntaxes:
- concise, omits colons and brackets
- functions as an extension of CSS syntax
sass-lang.com

View Slide

View Slide

Stylus
Expressive, robust, feature-rich CSS language built for nodejs. Supports
both an indented syntax and regular CSS style.
- optionally omit colons, semi-colons, brackets and more
learnboost.github.io/stylus/

View Slide

How can I use a
CSS Preprocessor?
Compile Locally
Client-side Compiling
Compile and Cache On-Demand (Server-Side)
Compile on Deploy
Jeff Croft: Many Ways to Use a CSS Preprocessor — hrrsn.me/TmUz

View Slide

Just starting out?
Use a GUI
Some of them are really, really good.

View Slide

View Slide

Codekit
Process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and
Compass files automatically each time you save.
incident57.com/codekit/

View Slide

View Slide

Compass.app
Compass.app is a menubar only app for Sass and Compass. It helps
designers compile stylesheets easily without resorting to command line
interface.
compass.kkbox.com

View Slide

View Slide

Koala
Koala is a GUI application for Less, Sass, Compass and CoffeeScript
compilation, to help web developers to use them more efficiently.
koala-app.com

View Slide

View Slide

Prepros
Prepros compiles LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript,
LiveScript, Haml and Markdown.
alphapixels.com/prepros/

View Slide

Syntax
The most important part of writing code in a CSS preprocessor is
understanding the syntax. Luckily for us, the syntax is (or can be)
identical to regular CSS for all three preprocessors.

View Slide

Sass (SCSS) or LESS
Sass (SCSS) and LESS both use standard CSS syntax. This makes it
extremely easy to convert an existing CSS file to either preprocessor.
/
* s
t
y
l
e
.
s
c
s
s o
r s
t
y
l
e
.
l
e
s
s *
/
h
1 {
c
o
l
o
r
: #
0
0
a
f
e
e
;
}
/
* s
t
y
l
e
.
s
a
s
s *
/
h
1
c
o
l
o
r
: #
0
0
a
f
e
e

View Slide

Stylus
Stylus accepts standard CSS syntax + other variations where brackets,
colons, and semi-colons are all optional.
/
* s
t
y
l
e
.
s
t
y
l *
/
d
i
v
.
m
a
s
t
h
e
a
d {
b
a
c
k
g
r
o
u
n
d
: #
0
0
a
f
e
e
;
}
/
* o
m
i
t b
r
a
c
k
e
t
s *
/
d
i
v
.
m
a
s
t
h
e
a
d
b
a
c
k
g
r
o
u
n
d
: #
0
0
a
f
e
e
;
/
* o
m
i
t c
o
l
o
n
s a
n
d s
e
m
i
-
c
o
l
o
n
s *
/
d
i
v
.
m
a
s
t
h
e
a
d
b
a
c
k
g
r
o
u
n
d #
0
0
a
f
e
e

View Slide

Variables
Variables are a way to store reusable strings that you can reference
throughout your stylesheet(s).
Use them to store things like colors, font stacks, etc.

View Slide

SCSS
$
m
a
i
n
-
c
o
l
o
r
: #
0
0
6
;
c
o
l
o
r
: $
m
a
i
n
-
c
o
l
o
r
;
LESS
@
m
a
i
n
-
c
o
l
o
r
: #
0
0
6
;
c
o
l
o
r
: @
m
a
i
n
-
c
o
l
o
r
;
Stylus
m
a
i
n
-
c
o
l
o
r = #
0
0
6
c
o
l
o
r m
a
i
n
-
c
o
l
o
r

View Slide

Mixins
Reusable sets of properties or rules that you can include or mix into
other rules. Define via @mixin mixin-name;and then use @include
mixin-name; with a selector.

View Slide

SCSS Mixins
@
m
i
x
i
n p
a
d
(
$
x
, $
y
) {
p
a
d
d
i
n
g
: $
y $
x
;
}
.
m
s
g {
@
i
n
c
l
u
d
e p
a
d
(
5
p
x
, 1
0
p
x
)
;
}

View Slide

LESS Mixins
.
p
a
d
(
@
x
, @
y
) {
p
a
d
d
i
n
g
: @
y @
x
;
}
.
m
s
g {
.
p
a
d
(
5
p
x
, 1
0
p
x
)
;
}

View Slide

Stylus Mixins
p
a
d
(
x
, y
)
p
a
d
d
i
n
g y x
.
m
s
g
p
a
d
(
5
p
x
, 1
0
p
x
)

View Slide

@import
Just like CSS, you can import additional stylesheets into a main
document. With preprocessors, there aren't multiple HTTP request.
Compiled CSS = 1 combined stylesheet.
@
i
m
p
o
r
t "
f
i
l
e
.
l
e
s
s
"
; /
/ L
E
S
S
@
i
m
p
o
r
t "
f
i
l
e
"
; /
/ A
s
s
u
m
e
s .
s
a
s
s o
r
.
s
c
s
s
@
i
m
p
o
r
t "
m
i
x
i
n
s
/
b
o
r
d
e
r
-
r
a
d
i
u
s
" /
/ A
s
s
u
m
e
s .
s
t
y
l
@
i
m
p
o
r
t "
s
t
y
l
e
.
c
s
s
" /
/ S
t
y
l
u
s - l
i
t
e
r
a
l

View Slide

And now here's the part where
I stop talking about LESS & Stylus.

View Slide

Sass Partials
Chunks of CSS that you are included in other Sass files.
These don't compile directly.
Reuse as you see fit.
/
/ f
i
l
e
n
a
m
e
: _
m
e
n
u
.
s
c
s
s
@
i
m
p
o
r
t "
_
m
e
n
u
"
;
/
/ O
R
:
@
i
m
p
o
r
t "
m
e
n
u
"
;
Underscore (_) is optional with @import. Sass checks for it automatically.

View Slide

/
/ F
i
l
e S
t
r
u
c
t
u
r
e
+ s
c
s
s
/
c
o
r
e
.
s
c
s
s /
/ P
r
i
m
a
r
y S
a
s
s f
i
l
e
@
i
m
p
o
r
t "
m
i
x
i
n
s
"
; /
/ _
m
i
x
i
n
s
.
s
c
s
s
@
i
m
p
o
r
t "
c
o
l
o
r
s
"
; /
/ _
c
o
l
o
r
s
.
s
c
s
s
@
i
m
p
o
r
t "
t
y
p
o
g
r
a
p
h
y
"
; /
/ _
t
y
p
o
g
r
a
p
h
y
.
s
c
s
s
@
i
m
p
o
r
t "
m
a
s
t
h
e
a
d
"
; /
/ _
m
a
s
t
h
e
a
d
.
s
c
s
s
@
i
m
p
o
r
t "
n
a
v
"
; /
/ _
n
a
v
.
s
c
s
s
/
/ I
t
'
d c
o
m
p
i
l
e t
h
e
m a
l
l i
n
t
o o
n
e C
S
S f
i
l
e
:
+ c
s
s
/
c
o
r
e
.
c
s
s
Underscore (_) is optional with @import. Sass checks for it automatically.

View Slide

Nesting
HTML has a fairly clear nested, visual hierarchy. CSS doesn't.
Sass lets you nest your CSS selectors in a way that follows the same
logical structure.

View Slide

Instead of writing repetitive
selectors...
h
1
{
f
o
n
t
-
f
a
m
i
l
y
: P
a
p
y
r
u
s
;
f
o
n
t
-
s
i
z
e
: 1
5
p
x
;
}
h
1 a
{
c
o
l
o
r
: #
f
f
e
1
0
0
;
}

View Slide

You can nest child selectors
within the parent.
h
1
{
f
o
n
t
{
f
a
m
i
l
y : P
a
p
y
r
u
s
;
s
i
z
e : 1
5
p
x
;
}
a
{
c
o
l
o
r
: #
f
f
e
1
0
0
;
}
}

View Slide

&
The allows you to refer back to a parent
when constructing a nested selector.

View Slide

This:
h
1
{
f
o
n
t
-
s
i
z
e
: 2
4
p
x
;
&
.
t
a
g
l
i
n
e
{
f
o
n
t
-
s
i
z
e
: 4
8
p
x
;
}
}
Compiles to this:
h
1
{ f
o
n
t
-
s
i
z
e
: 2
4
p
x
; }
h
1
.
t
a
g
l
i
n
e
{ f
o
n
t
-
s
i
z
e
: 4
8
p
x
; }

View Slide

Color Functions
lighten(), darken(), rgba(), hsla()

View Slide

l
i
g
h
t
e
n
(
$
c
o
l
o
r
,
$
a
m
o
u
n
t
)
d
a
r
k
e
n
(
$
c
o
l
o
r
,
$
a
m
o
u
n
t
)
r
g
b
a
(
$
c
o
l
o
r
,
$
o
p
a
c
i
t
y
)
h
s
l
a
(
$
c
o
l
o
r
,
$
o
p
a
c
i
t
y
)

View Slide

$
a
w
d
g
R
e
d
: #
d
e
3
8
3
1
;
a
.
l
o
g
o
{
b
a
c
k
g
r
o
u
n
d
: $
a
w
d
g
R
e
d
;
&
:
h
o
v
e
r
{
b
a
c
k
g
r
o
u
n
d
: d
a
r
k
e
n
(
$
a
w
d
g
R
e
d
,
2
5
)
;
}
&
:
a
c
t
i
v
e
{
b
a
c
k
g
r
o
u
n
d
: r
g
b
a
(
$
a
w
d
g
R
e
d
,
.
7
5
)
;
}
}
This compiles to: → colors.css

View Slide

Nested Media
Queries
Allow you to keep media queries within their original context.

View Slide

Nested Media Query
Here, we can change the <
h
1
> font-size based on viewport max-width.
h
1
{
f
o
n
t
-
s
i
z
e
: 4
e
m
;
@
m
e
d
i
a s
c
r
e
e
n a
n
d (
m
a
x
-
w
i
d
t
h
:
4
8
0
p
x
)
{
f
o
n
t
-
s
i
z
e
: 2
e
m
;
}
@
m
e
d
i
a s
c
r
e
e
n a
n
d (
m
a
x
-
w
i
d
t
h
:
3
2
0
p
x
)
{
c
o
l
o
r
: #
c
0
0
;
f
o
n
t
-
s
i
z
e
: 1
.
5
e
m
;
}
}

View Slide

But what if you want to change your breakpoints?
Conditional MQ Mixin
@
m
i
x
i
n b
p
(
$
p
o
i
n
t
) {
@
i
f $
p
o
i
n
t =
= p
a
p
a
-
b
e
a
r {
@
m
e
d
i
a (
m
a
x
-
w
i
d
t
h
: 1
6
0
0
p
x
) { @
c
o
n
t
e
n
t
; }
}
@
e
l
s
e i
f $
p
o
i
n
t =
= m
a
m
a
-
b
e
a
r {
@
m
e
d
i
a (
m
a
x
-
w
i
d
t
h
: 1
2
5
0
p
x
) { @
c
o
n
t
e
n
t
; }
}
@
e
l
s
e i
f $
p
o
i
n
t =
= b
a
b
y
-
b
e
a
r {
@
m
e
d
i
a (
m
a
x
-
w
i
d
t
h
: 6
0
0
p
x
) { @
c
o
n
t
e
n
t
; }
}
}

View Slide

How you'd use it
h
1
{
f
o
n
t
-
s
i
z
e
: 4
e
m
;
@
i
n
c
l
u
d
e b
p
(
m
a
m
a
-
b
e
a
r
)
{
f
o
n
t
-
s
i
z
e
: 2
e
m
;
}
@
i
n
c
l
u
d
e b
p
(
b
a
b
y
-
b
e
a
r
)
{
c
o
l
o
r
: #
c
0
0
;
f
o
n
t
-
s
i
z
e
: 1
.
5
e
m
;
}
}
CSS Tricks - Conditional Media Query Mixins - hrrsn.me/Tlub

View Slide

Operators
Sass has a handful of standard math operators like +, -, *, /, and %.

View Slide

Sass Operators
Here, we can calculate the width of the sidebar based on the width and
columns.
/
/ S
C
S
S
$
w
i
d
t
h
: 9
6
0
p
x
;
$
c
o
l
: 6
;
#
s
i
d
e
b
a
r
{
w
i
d
t
h
: (
$
w
i
d
t
h
/
$
c
o
l
)
;
}
/
/ B
E
C
O
M
E
S
#
s
i
d
e
b
a
r
{ w
i
d
t
h
:
1
6
0
p
x
; }

View Slide

%foo & @extend
Placeholder selectors look just like class or id's but they're used with
@extend. Used on their own, they aren't compiled into your CSS.

View Slide

%
c
l
e
a
r
f
i
x
{
z
o
o
m
:
1
;
&
:
b
e
f
o
r
e
,
&
:
a
f
t
e
r {
c
o
n
t
e
n
t
: "
\
0
0
2
0
"
;
d
i
s
p
l
a
y
: b
l
o
c
k
;
h
e
i
g
h
t
: 0
;
o
v
e
r
f
l
o
w
: h
i
d
d
e
n
;
}
&
:
a
f
t
e
r { c
l
e
a
r
: b
o
t
h
; }
}
h
e
a
d
e
r
{ @
e
x
t
e
n
d %
c
l
e
a
r
f
i
x
; }

View Slide

/
/ O
r y
o
u c
a
n e
x
t
e
n
d o
t
h
e
r s
e
l
e
c
t
o
r
s
.
e
r
r
o
r {
b
o
r
d
e
r
: 1
p
x #
f
0
0
;
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
: #
f
d
d
;
}
.
s
e
r
i
o
u
s
E
r
r
o
r {
@
e
x
t
e
n
d .
e
r
r
o
r
;
b
o
r
d
e
r
-
w
i
d
t
h
: 3
p
x
;
}
placeholder.css

View Slide

Demo Time

View Slide

Frameworks & Libraries
Bootstrap, Foundation, Compass, Bourbon & More...
hrrsn.me/RzyE

View Slide

Even Moar Reading
A collection of links on CSS Preprocessors, online tools, and more.
hrrsn.me/Rzwm

View Slide

You got this.

View Slide

Stay in Touch
Web:
Email:
Twitter: @
cdharrison.com
[email protected]
cdharrison

View Slide

Thank you.

View Slide

AWDG: Preprocess All the Things!

AWDG: Preprocess All the Things!

@cdharrison

More Decks by @cdharrison

Other Decks in Programming

Featured

Transcript