Slide 1
Slide 1 text
THE BEAUTY OF CSS
PRE-PROCESSORS:
AN INTRODUCTION
by /
Enrique Canals @ecanals
Slide 2
Slide 2 text
ENRIQUE CANALS
Software Developer @ The Hybrid Group
Currently working with Sphero, creating cool things for
connecting robots to the internet
Worked on several interesting web projects with Pebble
Current maintainer of the TextMate SCSS Bundle for syntax
highlighting with support for Atom and Sublime
|
@ecanals www.enriquecanals.com
Slide 3
Slide 3 text
WHAT WE'RE GOING TO COVER IN THIS SESSION
PART 1
CSS basics and shortcomings
What are CSS pre-processors
How pre-processors work and don't work
PART 2
Which one do I use? (Sass, Less, Stylus)
Workflow Integration
Using pre-processors in WordPress theme development
Slide 4
Slide 4 text
PART 1
Slide 5
Slide 5 text
CSS BASICS AND
SHORTCOMINGS
Slide 6
Slide 6 text
BASIC CSS SYNTAX
This is the CSS you're used to.
h
t
m
l
, b
o
d
y {
w
i
d
t
h
: 1
0
0
%
;
h
e
i
g
h
t
: 1
0
0
%
;
o
v
e
r
f
l
o
w
: h
i
d
d
e
n
;
}
b
o
d
y {
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
: #
f
f
f
;
c
o
l
o
r
: #
0
0
0
;
l
i
n
e
-
h
e
i
g
h
t
: 1
;
p
o
s
i
t
i
o
n
: r
e
l
a
t
i
v
e
;
}
Simple enough.
Slide 7
Slide 7 text
NOW SOMETHING A LITTLE MORE COMPLEX:
.
r
e
v
e
a
l
.
s
l
i
d
e s
e
c
t
i
o
n
, .
r
e
v
e
a
l
.
l
i
n
e
a
r s
e
c
t
i
o
n {
-
w
e
b
k
i
t
-
b
a
c
k
f
a
c
e
-
v
i
s
i
b
i
l
i
t
y
: h
i
d
d
e
n
;
b
a
c
k
f
a
c
e
-
v
i
s
i
b
i
l
i
t
y
: h
i
d
d
e
n
; }
.
r
e
v
e
a
l .
s
l
i
d
e
s > s
e
c
t
i
o
n
[
d
a
t
a
-
t
r
a
n
s
i
t
i
o
n
=
s
l
i
d
e
]
.
p
a
s
t
, .
r
e
v
e
a
l
.
s
l
i
d
e .
s
l
i
d
e
s > s
e
c
t
i
o
n
:
n
o
t
(
[
d
a
t
a
-
t
r
a
n
s
i
t
i
o
n
]
-
w
e
b
k
i
t
-
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
-
1
5
0
%
, 0
)
;
-
m
s
-
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
-
1
5
0
%
, 0
)
;
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
-
1
5
0
%
, 0
)
; }
.
r
e
v
e
a
l .
s
l
i
d
e
s > s
e
c
t
i
o
n
[
d
a
t
a
-
t
r
a
n
s
i
t
i
o
n
=
s
l
i
d
e
]
.
f
u
t
u
r
e
, .
r
e
v
e
a
l
.
s
l
i
d
e .
s
l
i
d
e
s > s
e
c
t
i
o
n
:
n
o
t
(
[
d
a
t
a
-
t
r
a
n
s
i
t
i
o
n
]
-
w
e
b
k
i
t
-
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
1
5
0
%
, 0
)
;
-
m
s
-
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
1
5
0
%
, 0
)
;
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
1
5
0
%
, 0
)
; }
.
r
e
v
e
a
l .
s
l
i
d
e
s > s
e
c
t
i
o
n > s
e
c
t
i
o
n
[
d
a
t
a
-
t
r
a
n
s
i
t
i
o
n
=
s
l
i
d
e
]
.
p
a
s
t
, .
r
e
v
e
a
l
.
s
l
i
d
e .
s
l
i
d
e
s > s
e
c
t
i
o
n > s
e
c
t
i
o
n
-
w
e
b
k
i
t
-
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
0
, -
1
5
0
%
)
;
-
m
s
-
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
0
, -
1
5
0
%
)
;
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
0
, -
1
5
0
%
)
; }
.
r
e
v
e
a
l .
s
l
i
d
e
s > s
e
c
t
i
o
n > s
e
c
t
i
o
n
[
d
a
t
a
-
t
r
a
n
s
i
t
i
o
n
=
s
l
i
d
e
]
.
f
u
t
u
r
e
, .
r
e
v
e
a
l
.
s
l
i
d
e .
s
l
i
d
e
s > s
e
c
t
i
o
n > s
e
c
t
i
o
n
-
w
e
b
k
i
t
-
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
0
, 1
5
0
%
)
;
-
m
s
-
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
0
, 1
5
0
%
)
;
t
r
a
n
s
f
o
r
m
: t
r
a
n
s
l
a
t
e
(
0
, 1
5
0
%
)
; }
You can see how this get's ugly fast.
Slide 8
Slide 8 text
SHORTCOMINGS WITH CSS
Not DRY
Hard to read
Harder to maintain
Seems lacking in basic features
Slide 9
Slide 9 text
We need more than what the CSS language provides
This is where CSS pre-processors come into play.
Slide 10
Slide 10 text
DEVELOPMENT WORKFLOW WITHOUT A PRE-PROCESSOR
Requires re-writing a lot of code, as CSS variables are still not
supported in all browsers.
Working with multiple CSS files means you're dependent on
using @
i
m
p
o
r
t to import rules from other stylesheets
Bad for performance
Requires making additional HTTP requests
If you're NOT writing CSS in multiple files...
Slide 11
Slide 11 text
You get it.
Slide 12
Slide 12 text
CSS on it's own just doesn't provide the features web developers
need to create large scale web applications
Slide 13
Slide 13 text
CSS pre-processors provide what we need in order to write
maintainable and extensible styles.
Slide 14
Slide 14 text
WHAT ARE CSS
PRE PROCESSORS?
Slide 15
Slide 15 text
THE MOST POPULAR PRE-PROCESSORS
They all do the same thing in slightly different ways.
Slide 16
Slide 16 text
SO WHAT EXACTLY DO THEY DO?
Simply put, CSS pre-processors are a build tool used to
concatenate stylesheets.
That's basically it.
But wait... there's more.
A lot more.
Slide 17
Slide 17 text
FEATURES
Nesting
Variables
Mixins
Operations and
Functions
Imports
Partials
Slide 18
Slide 18 text
A NOTE ABOUT THESE FEATURES
Sass, Less and Stylus support all of these features.
The differences between them are not significant enough to
make an argument for one over the other; it's a matter of
preference.
None of these features add to or enhance CSS in anyway, they
simply improve the development workflow for writing CSS.
Slide 19
Slide 19 text
NESTING
SASS (SCSS) CSS OUTPUT
.
h
e
r
o {
.
h
e
r
o
-
b
u
t
t
o
n {
&
:
h
o
v
e
r {
}
}
}
.
h
e
r
o {
}
.
h
e
r
o .
h
e
r
o
-
b
u
t
t
o
n {
}
.
h
e
r
o .
h
e
r
o
-
b
u
t
t
o
n
:
h
o
v
e
r {
}
Slide 20
Slide 20 text
NESTING
SASS (SCSS) CSS OUTPUT
.
s
t
a
t
i
c {
f
o
n
t
-
f
a
m
i
l
y
: '
A
r
i
a
l
'
, s
a
n
s
-
s
e
r
i
f
;
p
a
d
d
i
n
g
: 0
;
s
e
c
t
i
o
n {
m
i
n
-
h
e
i
g
h
t
: 5
4
e
m
;
.
h
e
r
o
-
t
e
x
t {
t
e
x
t
-
a
l
i
g
n
: c
e
n
t
e
r
;
h
3 {
c
o
l
o
r
: #
0
6
9
3
c
9
;
f
o
n
t
-
s
i
z
e
: 3
e
m
;
t
e
x
t
-
t
r
a
n
s
f
o
r
m
: u
p
p
e
r
c
a
s
e
;
}
p {
f
o
n
t
-
s
i
z
e
: 1
.
5
e
m
}
}
}
}
.
s
t
a
t
i
c {
f
o
n
t
-
f
a
m
i
l
y
: '
A
r
i
a
l
'
, s
a
n
s
-
s
e
r
i
f
;
p
a
d
d
i
n
g
: 0
;
}
.
s
t
a
t
i
c s
e
c
t
i
o
n {
m
i
n
-
h
e
i
g
h
t
: 5
4
e
m
;
}
.
s
t
a
t
i
c s
e
c
t
i
o
n .
h
e
r
o
-
t
e
x
t {
t
e
x
t
-
a
l
i
g
n
: c
e
n
t
e
r
;
}
.
s
t
a
t
i
c s
e
c
t
i
o
n .
h
e
r
o
-
t
e
x
t h
3 {
f
o
n
t
-
s
i
z
e
: 3
e
m
;
t
e
x
t
-
t
r
a
n
s
f
o
r
m
: u
p
p
e
r
c
a
s
e
;
c
o
l
o
r
: #
0
6
9
3
c
9
;
}
.
s
t
a
t
i
c s
e
c
t
i
o
n .
h
e
r
o
-
t
e
x
t p {
f
o
n
t
-
s
i
z
e
: 1
.
5
e
m
;
}
Protip: don't nest too much. Max. 4 levels.
Slide 21
Slide 21 text
VARIABLES
Variables allow you to store values and reuse them as needed in your code.
$
c
o
o
l
_
o
r
a
n
g
e
: #
E
2
9
9
1
F
;
$
m
a
i
n
_
c
o
l
o
r
: $
c
o
o
l
_
o
r
a
n
g
e
;
h
4 {
c
o
l
o
r
: $
m
a
i
n
_
c
o
l
o
r
;
}
Slide 22
Slide 22 text
VARIABLES
Variables can be used for all types of values.
$
h
e
a
d
i
n
g
F
o
n
t
: '
L
e
a
g
u
e G
o
t
h
i
c
'
, I
m
p
a
c
t
, s
a
n
s
-
s
e
r
i
f
;
$
h
e
a
d
i
n
g
C
o
l
o
r
: #
e
e
e
;
$
h
e
a
d
i
n
g
L
i
n
e
H
e
i
g
h
t
: 1
.
2
;
$
h
e
a
d
i
n
g
L
e
t
t
e
r
S
p
a
c
i
n
g
: n
o
r
m
a
l
;
$
h
e
a
d
i
n
g
T
e
x
t
T
r
a
n
s
f
o
r
m
: u
p
p
e
r
c
a
s
e
;
$
h
e
a
d
i
n
g
T
e
x
t
S
h
a
d
o
w
: n
o
n
e
;
$
h
e
a
d
i
n
g
F
o
n
t
W
e
i
g
h
t
: n
o
r
m
a
l
;
$
h
e
a
d
i
n
g
1
T
e
x
t
S
h
a
d
o
w
: $
h
e
a
d
i
n
g
T
e
x
t
S
h
a
d
o
w
;
These are variables used for this presentation.
Slide 23
Slide 23 text
MIXINS
Mixins allow you to define rules that output CSS.
@
m
i
x
i
n r
a
d
i
a
l
-
g
r
a
d
i
e
n
t
( $
o
u
t
e
r
, $
i
n
n
e
r
, $
t
y
p
e
: c
i
r
c
l
e ) {
b
a
c
k
g
r
o
u
n
d
: $
o
u
t
e
r
;
b
a
c
k
g
r
o
u
n
d
: -
m
o
z
-
r
a
d
i
a
l
-
g
r
a
d
i
e
n
t
( c
e
n
t
e
r
, $
t
y
p
e c
o
v
e
r
, $
i
n
n
e
r 0
%
, $
o
u
t
e
r 1
0
0
% )
;
b
a
c
k
g
r
o
u
n
d
: -
w
e
b
k
i
t
-
g
r
a
d
i
e
n
t
( r
a
d
i
a
l
, c
e
n
t
e
r c
e
n
t
e
r
, 0
p
x
, c
e
n
t
e
r c
e
n
t
e
r
, 1
0
0
%
, c
o
l
o
r
-
s
t
o
p
(
0
%
,
$
i
n
n
e
r
)
, c
o
l
o
r
-
s
t
o
p
b
a
c
k
g
r
o
u
n
d
: -
w
e
b
k
i
t
-
r
a
d
i
a
l
-
g
r
a
d
i
e
n
t
( c
e
n
t
e
r
, $
t
y
p
e c
o
v
e
r
, $
i
n
n
e
r 0
%
, $
o
u
t
e
r 1
0
0
% )
;
b
a
c
k
g
r
o
u
n
d
: -
o
-
r
a
d
i
a
l
-
g
r
a
d
i
e
n
t
( c
e
n
t
e
r
, $
t
y
p
e c
o
v
e
r
, $
i
n
n
e
r 0
%
, $
o
u
t
e
r 1
0
0
% )
;
b
a
c
k
g
r
o
u
n
d
: -
m
s
-
r
a
d
i
a
l
-
g
r
a
d
i
e
n
t
( c
e
n
t
e
r
, $
t
y
p
e c
o
v
e
r
, $
i
n
n
e
r 0
%
, $
o
u
t
e
r 1
0
0
% )
;
b
a
c
k
g
r
o
u
n
d
: r
a
d
i
a
l
-
g
r
a
d
i
e
n
t
( c
e
n
t
e
r
, $
t
y
p
e c
o
v
e
r
, $
i
n
n
e
r 0
%
, $
o
u
t
e
r 1
0
0
% )
;
}
.
r
a
d
i
a
l
-
b
a
c
k
g
r
o
u
n
d {
@
i
n
c
l
u
d
e r
a
d
i
a
l
-
g
r
a
d
i
e
n
t
( #
a
d
d
9
e
4
, #
f
7
f
b
f
c )
;
}
Slide 24
Slide 24 text
OPERATIONS AND FUNCTIONS
Color Functions
Math Operations
$
s
i
c
k
_
o
r
a
n
g
e
: s
a
t
u
r
a
t
e
(
$
c
o
o
l
_
o
r
a
n
g
e
, 5
0
%
)
;
$
l
i
g
h
t
_
o
r
a
n
g
e
: l
i
g
h
t
e
n
(
$
c
o
o
l
_
o
r
a
n
g
e
, 1
0
%
)
;
$
n
o
t
_
o
r
a
n
g
e
: i
n
v
e
r
t
(
$
c
o
o
l
_
o
r
a
n
g
e
)
;
$
d
a
r
k
_
o
r
a
n
g
e
: d
a
r
k
e
n
(
$
c
o
o
l
_
o
r
a
n
g
e
, 2
5
%
)
;
w
i
d
t
h
: 3
6
0
p
x * 3 / 6
p
x
;
/
* = 1
8
0
p
x *
/
.
s
m
a
l
l
-
i
m
a
g
e {
w
i
d
t
h
: $
i
m
g
W
i
d
t
h / 2
;
}
Slide 25
Slide 25 text
IMPORTS
Importing multiple files now comes at no cost
@
i
m
p
o
r
t "
.
.
/
t
e
m
p
l
a
t
e
/
m
i
x
i
n
s
"
;
@
i
m
p
o
r
t "
.
.
/
t
e
m
p
l
a
t
e
/
m
o
d
u
l
e
s
"
;
@
i
m
p
o
r
t u
r
l
(
h
t
t
p
s
:
/
/
f
o
n
t
s
.
g
o
o
g
l
e
a
p
i
s
.
c
o
m
/
c
s
s
?
f
a
m
i
l
y
=
Q
u
i
c
k
s
a
n
d
:
4
0
0
,
7
0
0
,
4
0
0
@
i
m
p
o
r
t u
r
l
(
h
t
t
p
s
:
/
/
f
o
n
t
s
.
g
o
o
g
l
e
a
p
i
s
.
c
o
m
/
c
s
s
?
f
a
m
i
l
y
=
O
p
e
n
+
S
a
n
s
:
4
0
0
i
t
a
l
i
c
,
7
0
0
Slide 26
Slide 26 text
PARTIALS
Partials allow you to split your code into smaller, more managable files that can then
be used inside of other Sass files.
Files prefixed with an underscore (i.e. _
p
a
r
t
i
a
l
.
s
c
s
s
) are regarded as partials and
are not generated into a CSS file.
Partials are used with the @
i
m
p
o
r
t directive.
c
s
s
/
b
a
s
e
.
s
c
s
s
s
c
s
s
/
b
a
s
e
/
_
c
o
l
o
r
s
.
s
c
s
s
_
m
i
x
i
n
s
.
s
c
s
s
_
r
e
s
e
t
.
s
c
s
s
l
a
y
o
u
t
/
_
g
r
i
d
@
i
m
p
o
r
t '
r
e
s
e
t
'
@
i
m
p
o
r
t '
m
i
x
i
n
s
'
@
i
m
p
o
r
t '
c
o
l
o
r
s
'
Slide 27
Slide 27 text
COMMON
MISCONCEPTIONS
Slide 28
Slide 28 text
"I DON'T WANT TO ADD ANOTHER DEPENDENCY
TO MY APPLICATION..."
Agreed. CSS pre-processors are meant to be used as build tools
that run in your development environment.
There's no need to add anything to your web server in order for
you to use it.
Slide 29
Slide 29 text
"DO I NEED TO LEARN RUBY OR NODE IN ORDER
TO USE A PRE-PROCESSOR?"
No. But you will need to have them installed on your
workstation in order to use them.
Sass is written in Ruby. Less and Stylus are written in Javascript.
Installing both is easy on Windows, Linux and OS X.
Slide 30
Slide 30 text
"A IS BETTER THAN B BECAUSE OF ..."
Sass, Less and Stylus all provide the same features.
Each has it's own unique way of accomplishing the same task.
It all comes down to personal preference, so try all of them and
make your own decision on what's best.
Slide 31
Slide 31 text
PART 2
Slide 32
Slide 32 text
WHICH ONE
SHOULD I USE?
Sass, Less, or Stylus
Slide 33
Slide 33 text
HOW TO MAKE A DECISION?
Everyone has their own way of doing things.
If you're into Ruby, Sass might be your thing.
If you're into Javascript, Less or Stylus might be better too.
See what works best for you.
Slide 34
Slide 34 text
RELATED PROJECTS
Both Sass and Haml were created by Hampton Catlin (@hcatlin)
and Natalie Weizenbaum (@nex3)
Slide 35
Slide 35 text
RELATED PROJECTS
TJ Holowaychuk (@tjholowaychuk) is the creator of Stylus, as
well as the extremely popular Jade templating engine and
Express, the Node web framework.
Slide 36
Slide 36 text
RELATED PROJECTS
Alexis Sellier (@cloudhead) is the original author of Less.
Bootstrap is built with Less; but has Sass support as well.
Slide 37
Slide 37 text
GETTING STARTED WITH SASS
Has 2 different syntaxes
1. .
s
a
s
s | CoffeeScript-esqe
2. .
s
c
s
s | Just like CSS
Foundation and Bootstrap Support
Insanely efficient when used with
Slide 38
Slide 38 text
WORKFLOW
INTEGRATION &
FEATURES
Slide 39
Slide 39 text
INSTALLATION AND SETUP
INSTALL ONLY SASS
> g
e
m i
n
s
t
a
l
l s
a
s
s
> s
a
s
s -
-
w
a
t
c
h /
p
a
t
h
/
t
o
/
s
a
s
s
/
f
i
l
e
.
s
c
s
s
That's it.
Slide 40
Slide 40 text
INSTALLATION AND SETUP
INSTALL SASS + COMPASS
> g
e
m i
n
s
t
a
l
l c
o
m
p
a
s
s
> c
o
m
p
a
s
s c
r
e
a
t
e n
e
w
-
p
r
o
j
e
c
t
> c
o
m
p
a
s
s w
a
t
c
h
Sass is included as a dependency in the c
o
m
p
a
s
s gem
Slide 41
Slide 41 text
ADDITIONAL DEVELOPMENT TOOLS
Compass.app, Less.app, CodeKit, LiveReload,
Crunchapp
Compass.app, SimpLess, Crunchapp
Compass.app, Crunchapp, SimpleLess, WinLess,
LiveReload
Slide 42
Slide 42 text
WORKSTATION SETUP
Choose an editor / IDE that you like and that fits your needs.
Most popular editors have Sass support. Here are a few:
Slide 43
Slide 43 text
SYNTAX HIGHLIGHTING
SCSS Syntax Highlighting Bundle by Mario Ricalde
Slide 44
Slide 44 text
CONVENIENT FEATURES
Nested media queries
$
b
r
e
a
k
-
s
m
a
l
l
: 3
2
0
p
x
;
$
b
r
e
a
k
-
l
a
r
g
e
: 1
2
0
0
p
x
;
.
p
r
o
f
i
l
e
-
p
i
c {
f
l
o
a
t
: l
e
f
t
;
w
i
d
t
h
: 2
5
0
p
x
;
@
m
e
d
i
a s
c
r
e
e
n a
n
d (
m
a
x
-
w
i
d
t
h
: $
b
r
e
a
k
-
s
m
a
l
l
) {
w
i
d
t
h
: 1
0
0
p
x
;
f
l
o
a
t
: n
o
n
e
;
}
@
m
e
d
i
a s
c
r
e
e
n a
n
d (
m
i
n
-
w
i
d
t
h
: $
b
r
e
a
k
-
l
a
r
g
e
) {
f
l
o
a
t
: r
i
g
h
t
;
}
}
Slide 45
Slide 45 text
CONVENIENT FEATURES
Creating a color palette
SASS (SCSS) CSS OUTPUT
@
b
a
s
e
: #
6
6
3
3
3
3
;
@
l
i
g
h
t
e
r
1
: l
i
g
h
t
e
n
(
s
p
i
n
(
@
b
a
s
e
, 5
)
, 1
0
%
)
;
@
l
i
g
h
t
e
r
2
: l
i
g
h
t
e
n
(
s
p
i
n
(
@
b
a
s
e
, 1
0
)
, 2
0
%
)
;
@
d
a
r
k
e
r
1
: d
a
r
k
e
n
(
s
p
i
n
(
@
b
a
s
e
, -
5
)
, 1
0
%
)
;
@
d
a
r
k
e
r
2
: d
a
r
k
e
n
(
s
p
i
n
(
@
b
a
s
e
, -
1
0
)
, 2
0
%
)
;
.
o
n
e {
c
o
l
o
r
: @
b
a
s
e
;
}
.
t
w
o {
c
o
l
o
r
: @
l
i
g
h
t
e
r
1
;
}
.
t
h
r
e
e {
c
o
l
o
r
: @
l
i
g
h
t
e
r
2
;
}
.
f
o
u
r {
c
o
l
o
r
: @
d
a
r
k
e
r
1
;
}
.
f
i
v
e {
c
o
l
o
r
: @
d
a
r
k
e
r
2
;
}
.
o
n
e {
c
o
l
o
r
: #
6
6
3
3
3
3
;
}
.
t
w
o {
c
o
l
o
r
: #
8
8
4
a
4
4
;
}
.
t
h
r
e
e {
c
o
l
o
r
: #
a
a
6
3
5
5
;
}
.
f
o
u
r {
c
o
l
o
r
: #
4
4
2
2
2
5
;
}
.
f
i
v
e {
c
o
l
o
r
: #
4
4
2
2
2
5
;
}
Slide 46
Slide 46 text
DEBUGGING
SASS
Enable debug info in your logs.
> s
a
s
s -
-
w
a
t
c
h p
a
t
h
/
t
o
/
y
o
u
r
/
s
a
s
s -
-
d
e
b
u
g
-
i
n
f
o
Slide 47
Slide 47 text
BROWSER DEVTOOLS
Chrome
Chrome DevTools requires CSS source maps support.
Firefox
Slide 48
Slide 48 text
UNIT CONVERSION
PIXELS TO EMS
PIXELS TO %
f
o
n
t
-
s
i
z
e
: (
1
8
p
x / $
c
o
n
t
e
x
t
) * 1
e
m /
/ 1
.
1
2
5
e
m
$
p
a
g
e
-
w
i
d
t
h
:
1
0
2
4
p
x
;
.
c
o
n
t
a
i
n
e
r {
w
i
d
t
h
: p
e
r
c
e
n
t
a
g
e
(
2
0
0
p
x / $
p
a
g
e
-
w
i
d
t
h
)
;
m
a
r
g
i
n
: p
e
r
c
e
n
t
a
g
e
(
1
5
p
x / $
p
a
g
e
-
w
i
d
t
h
)
;
}
Slide 49
Slide 49 text
Read about all the features Sass provides in the docs.
Sass Reference Docs
Slide 50
Slide 50 text
USING SASS IN A
WORDPRESS
APPLICATION
Slide 51
Slide 51 text
USING SASS IN A WORDPRESS
APPLICATION
Generated CSS must abide by WordPress' naming and style
conventions.
There must be a s
t
y
l
e
.
c
s
s file with the appropriate
comments at the top of the file.
/
*
T
h
e
m
e N
a
m
e
: M
y
T
h
e
m
e
T
h
e
m
e U
R
I
: h
t
t
p
:
/
/
e
x
a
m
p
l
e
.
c
o
m
D
e
s
c
r
i
p
t
i
o
n
: M
y c
o
o
l n
e
w s
i
t
e
.
A
u
t
h
o
r
: E
n
r
i
q
u
e C
a
n
a
l
s
A
u
t
h
o
r U
R
I
: e
n
r
i
q
u
e
c
a
n
a
l
s
.
V
e
r
s
i
o
n
: 1
.
0
*
/
Slide 52
Slide 52 text
USING SASS IN A WORDPRESS
APPLICATION
There's also the plugin, which provides compiling and
configuration options for writing Sass for your WordPress
themes.
Source is also available on GitHub:
WP-SCSS
https://github.com/ConnectThink/WP-SCSS
Slide 53
Slide 53 text
WP-SCSS SETTINGS
Slide 54
Slide 54 text
THE END
Thank you
Slide 55
Slide 55 text
SPECIAL THANKS
TO ALL OF THE CREATORS OF THE TOOLS MENTIONED HERE:
Natalie Weizenbaum & Hampton Catlin (Sass)
TJ Holowaychuk (Stylus)
Alexis Sellier (Less)
Chris Eppstein (Compass)
Mario Ricalde (TextMate SCSS Bundle)
Hakim El Hattab for Reveal.js (how this presentation was made)
Many more not mentioned...
Slide 56
Slide 56 text
LINKS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Reveal.js
The Sass Way
Compass
Sass
Sass Reference
Less
Stylus
TextMate SCSS Syntax Highlighting Bundle
enriquecanals.com
[email protected]