Front-‐end
Workflow
with
Sass
&
WordPress
Aisha
Henderson
Slide 2
Slide 2 text
SASSY
CSS
&
WORDPRESS
Slide 3
Slide 3 text
SASS
(Syntac*cally
Awesome
StyleSheets)
Slide 4
Slide 4 text
SASS?
Slide 5
Slide 5 text
INSTALL
SASS
Slide 6
Slide 6 text
INSTALL
SASS
Slide 7
Slide 7 text
SASS
COMPILER
Libsass
• C++
re-‐implementaFon
of
the
Ruby-‐based
Sass
compiler
• Faster
compile
Fmes,
much
faster!
Ruby
Sass
• Ruby-‐based
Sass
compiler
• Typically
slower
compile
Fmes,
compared
to
Libsass
Slide 8
Slide 8 text
SASS
SYNTAX
SCSS
• File
extension
.scss
• It
doesn’t
require
a
shiS
in
code
formaTng
• Easily
convert
an
exisFng
stylesheet
to
use
Sass’s
funcFonality
SASS
• File
extension
.sass
• Indented
syntax
• Stripped
down,
no
curly
braces
or
semicolons
Slide 9
Slide 9 text
CHOOSE
AN
OUTPUT
STYLE
• Nested
(the
default)
ol
{
margin:
10px
0;
padding:
10px
0;
}
ol
li
{
font-‐size:
2em;
line-‐height:
1.4;
}
ol
li
p
{
color:
#333;
}
• Expanded
ol
{
margin:
10px
0;
padding:
10px
0;
}
ol
li
{
font-‐size:
2em;
line-‐height:
1.4;
}
ol
li
p
{
color:
#333;
}
Slide 10
Slide 10 text
CHOOSE
AN
OUTPUT
STYLE
• Compact
ol
{
margin:
10px
0;
padding:
10px
0;
}
ol
li
{
font-‐size:
2em;
line-‐
height:
1.4;
}
ol
li
p
{
color:
#333;
}
• Compressed
ol{margin:10px
0;padding:
10px
0;}ol
li{font-‐size:
2em;line-‐height:1.4;}ol
li
p{color:#333;}
Slide 11
Slide 11 text
UNDERSCORES.ME
Slide 12
Slide 12 text
STYLE.SCSS
Slide 13
Slide 13 text
SASS
FOLDER
STRUCTURE
Slide 14
Slide 14 text
PARTIALS
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
VARIABLES
Slide 17
Slide 17 text
NESTING
Slide 18
Slide 18 text
MIXINS
Slide 19
Slide 19 text
EXTEND
Slide 20
Slide 20 text
SASS
MAPS
Slide 21
Slide 21 text
SASS
FUNCTIONS
Slide 22
Slide 22 text
MEDIA
QUERIES
Slide 23
Slide 23 text
SOURCE
MAPS
FOR
SASS
If
you
look
in
your
output
folder
aFer
running
that
command,
you'll
no*ce
that
a
comment
has
been
added
to
the
end
of
the
generated
CSS
file:
At
The
Command
Line