Presentation on the basic of sass. Small demo at: https://github.com/Tiagojdferreira/sass

1. Sassy
:
very
stylish

2. This
is
me

3. This is Sassy me

4. Sass
–
CSS
with
super
powers

5. First
things
first
• @import
‘folder/filename’
without
the
extension
• Add
_
to
the
filename
if
you
do
not
want
to
output
individual
files

6. Structure
your
project
• At
BNP-­‐parvest:
– Main.scss
– Variables.scss
– Common
folder
– Modules
folder
• hJp://thesassway.com/beginner/how-­‐to-­‐
structure-­‐a-­‐sass-­‐project

7. Placeholder
%
• Avoid
duplicaLon
of
outpuJed
text
• Be
sure
no
one
overrides
your
class
• Used
with
@extend
• Can
not
be
used
inside
media
queries
• hJp://www.sitepoint.com/sass-­‐mixin-­‐
placeholder/

8. Mixin
• @mixin
• Used
with
@include
• Can
take
variables
^^

9. Placeholder
or
mixin
?
• It
is
up
to
you.
• Speedwise
people
tend
to
prefer
placeholders
and
extend.
If
you
gzip
your
css,
it
doesn’t
maJer.
• hJps://www.feedthebot.com/pagespeed/
enable-­‐compression.html

10. @extend
• Can
be
used
with
classes
and
placeholders
• Try
to
learn
how
it
works:
– hJp://www.sitepoint.com/sass-­‐extend-­‐nobody-­‐
told-­‐you/

11. The
Devil
lies
in
the
@extend

12. Logic
• @if
@else
• @for
• @each
• @while

13. @func?on
• use@funcLon
and
@return.
• Returns
a
value
• Perfect
for
creaLng
reusable
components
(DRY)
– hJp://thesassway.com/advanced/pure-­‐sass-­‐
funcLons

14. You
can
do
some
useful
stuff

15. And
Sass
comes
with
a
lot
of
them
• hJp://sass-­‐lang.com/documentaLon/Sass/Script/
FuncLons.html

16. Demo
?me!

18. ‘Scope’
your
changes
• Create
a
class
in
the
top
of
your
view,
for
example:
– .signup
• Add
specific
changes
inside
this
class

19. Rules
of
Thumb
• How
to
make
a
buJon
look
like
disabled
?
– Opacity:
0.5
• How
long
should
a
transiLon
last
?
– 0.3
s
• How
to
verLcally
center
an
element
?
– Top:
50%;
transform:translateY(-­‐50%);

20. Responsive
font-­‐size
• You
can
make
a
super
duper-­‐awesome
mixin…
• Or
you
can
use
font-­‐size:
– Small
– Normal
– Large
• In
some
cases
smaller
and
larger
are
also
acceptable

21. Flex-­‐what
?
• Flex-­‐box
is
amazing.
It
is
also
only
IE
10+
compaLble,
so
remember
that
when
deciding
to
use
it.
• hJps://css-­‐tricks.com/snippets/css/a-­‐guide-­‐
to-­‐flexbox/
• hJps://css-­‐tricks.com/using-­‐flexbox/

22. CSS
Frameworks?
• Compass
• Bourbon
+
stuff
• Final
thought:
Not
worth
• hJp://www.sitepoint.com/compass-­‐or-­‐
bourbon-­‐sass-­‐frameworks/

23. Awesomesauce
resources!
hJp://thesassway.com/
hJps://css-­‐tricks.com/

24. Ques?ons
?