An introduction to Sass.

1. `
1 PLAYER GAME
MARIO
0000000
WORLD
1-1
TIME
ROCK_EAGLE
Simplifying and
extending CSS for the
21st century!
2 PLAYER GAME

2. Introductions
and
Shout Outs
World -1-1
Section Text
Body Level One
MARIO
0000000
WORLD
-1-1
TIME
ROCK_EAGLE
x 3

3. Eric Sembrat
• Web Manager - College of
Engineering, Georgia Tech
• Ph.D. Student - Instructional
Technology, Georgia State
!
!
• Website: http://ericsembrat.com
• Twitter: @esembrat

4. World Map
• The State of CSS
• Enter: CSS Preprocessors
• How Sass Works
• Sass Features
• Q&A / Discussion

5. And now, for some plugs..

6. USGWeb Collaboration Group
• Communication list for web development
discussion between the 31 institutions
in the University System of Georgia.
!
• http://usgweb.gatech.edu

7. http://atlanta.buildguild.org/

8. The State
of CSS
World 1-1
Section Text
Body Level One
MARIO
0000000
WORLD
1-1
TIME
ROCK_EAGLE
x 3

9. We’ve come a long way…

10. We’ve come a long way…

11. CSS Growing Up
• Before CSS, there were
inline element styles.
<font color=“green” size=“8” family=“Wingdings”>

12. CSS Growing Up
• Before CSS, there were
inline element styles.
!
• Then CSS was born
with style.
<font color=“green” size=“8” family=“Wingdings”>
<font style=“color: green; font-size: 8pt; font-family:
Wingdings”>

13. CSS Growing Up
• Before CSS, there were
inline element styles.
!
• Then CSS was born
with style.
!
• Finally, CSS grew too
big to live with HTML.
<font color=“green” size=“8” family=“Wingdings”>
<font style=“color: green; font-size: 8pt; font-family:
Wingdings”>
@import url(fancy-pants-css.css);

14. CSS Has Not Aged Well..
Variables
CSS3
Inheritance
Reusability
CSS Organization
Media Queries
Theme Templates

15. Some of this will change..
• CSS4 looks to fix some of
these issues (1)
• Parent Selectors
• Grids
• However, there’s still one big elephant in the room.

16. Don’t Repeat Yourself

17. What is DRY?
• Minimizing repetition of
the information in a
project
• Modifications only happen in
one place
!
• Construction of
repetitive, reusable,
and scalable elements

18. DRY in CSS
• CSS does not have DRY
capabilities built-in:
• Variables (i.e. color, font)
• Media queries
• Chunks of CSS
• So, how do we fix CSS and get out of this mess?

19. Sass to the Rescue!
http://sass-lang.com/

20. What is
Sass?
World 2-1
Section Text
Body Level One
MARIO
0000000
WORLD
2-1
TIME
ROCK_EAGLE
x 3

21. Preprocessor
• Sass is a preprocessor for CSS
• Converts Sass short-code into clunky, ugly CSS
• Serves as a translator
CSS
compiles
to
SASS

22. Sass
• Sass uses a very CSS-like syntax (.SCSS) to extend
new features into the syntax you already know
!
• An alternative is a tab-centric syntax (.SASS)

23. Compare
#main {
color: blue;
font-size: 0.3em;
• Our CSS-friendly .SCSS
formatting option.
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
}
#main!
color: blue
font-size: 0.3em
• Or, the tab-centric .SASS
formatting option.

24. .SCSS vs. .SASS
• Changing syntax is an automated
process:
• http://sass-lang.com/documentation/
file.SASS_REFERENCE.html#syntax

25. What does Ruby run on?
• Sass was originally developed
as in the Ruby programming
language.
• Sass was recently ported over
to C/C++ as LibSass.

26. Using Sass
World 3-1
Section Text
Body Level One
MARIO
0000000
WORLD
3-1
TIME
ROCK_EAGLE
x 3

27. Web Console
• SassMeister
• http://sassmeister.com/

28. 1) Get a App
• Easiest way to get started is to download a Sass
application.
• http://sass-lang.com/install
• Multi-platform releases
• Free and paid products available

29. Scout
Scout - http://mhs.github.io/scout-app/

30. CodeKit
CodeKit - https://incident57.com/codekit/

31. Sass
Features
World 4-1
Section Text
Body Level One
MARIO
0000000
WORLD
4-1
TIME
ROCK_EAGLE
x 3

32. 2) Learn the Syntax
• Learn many of the essential
features of Sass.
• Variables
• Nesting
• Mixins
• Plugins
• Partials
• (and more!)

33. Variables
$pretty-blue: #0000FF;
$pretty-font-size: 0.3em;
!
#main {
color: $pretty-blue;
font-size: $pretty-font-size;
}
#main {
color: #0000FF;
font-size: 0.3em;
}

34. Nesting
$pretty-blue: #0000FF;
!
#main {
color: $pretty-blue;
font-size: 0.3em;
#slideshow {
background-color:
mix(#FFF, $pretty-blue,
20%);
}
}
#main {
color: #0000FF;
font-size: 0.3em;
}
!
#main #slideshow {
background-color: #3333ff;
}

35. Mixins
@mixin chattanooga() {
background-color: pink;
font-size: 25pt;
}
!
#body #chattanooga {
@include chattanooga();
}
#body #chattanooga {
background-color: pink;
font-size: 25pt;
}

36. Mixins
@mixin chattanooga() {
background-color: pink;
font-size: 25pt;
Mixins can reference mixins!
}
!
#body #chattanooga {
@include chattanooga();
}
#body #chattanooga {
background-color: pink;
font-size: 25pt;
}

37. Mixins
@mixin chattanooga() {
background-color: pink;
font-size: 25pt;
Mixins can take arguments (with
}
!
#body #chattanooga {
default values)!
@include chattanooga();
}
#body #chattanooga {
background-color: pink;
font-size: 25pt;
}

38. Plugins
• Compass
• http://compass-style.org/
• Sass Globbing
• https://github.com/chriseppstein/sass-globbing
• Breakpoint
• http://breakpoint-sass.com/
• Bourbon
• http://bourbon.io/

39. Partials
compiles
global.scss global.css
to
_hdr.scss
_ftr.scss

40. Configure CSS Output
• Sass uses a configuration file (config.rb) to control
CSS output
• Requires Compass
• http://compass-style.org/help/documentation/configuration-reference/

41. Advanced
Features
World 5-1
Section Text
Body Level One
MARIO
0000000
WORLD
5-1
TIME
ROCK_EAGLE
x 3

42. Block Element Modifier (BEM)
• Methodology for naming classes.
.BLOCK{__ELEMENT[--MODIFIER]}

43. Block Element Modifier (BEM)
• Methodology for naming classes.
.BLOCK{__ELEMENT[--MODIFIER]}
.COLOR__PRIMARY
.COLOR__PRIMARY--LIGHT
.COLOR__PRIMARY--DARK

44. Block Element Modifier (BEM)
• Can be programmatically built into Sass.

45. Block Element Modifier (BEM)
• Can be programmatically built into Sass.

46. Source Maps
• Source maps allow you to see the original source
(Sass) instead of the compiled CSS while debugging.

47. Source Maps
• Requires enabling source-maps on Sass and in the
desired browser (Chrome & Firefox, Safari).
http://thesassway.com/intermediate/using-source-maps-with-sass

48. • Associations of “key” | “value” objects.
!
!
!
!
• Similar to programming arrays.
• map-merge()
• map-get()
• map-remove()
Maps
$map: (key1: value1, key2: value2, key3: value3);

49. Demo?
World 6-1
Section Text
Body Level One
MARIO
0000000
WORLD
6-1
TIME
ROCK_EAGLE
x 3

50. Demo
Quick highlights and features!

51. Let’s Chat
Questions, Comments, Concerns, Discussions about Sass