The document discusses Sass (Syntactically Awesome Style Sheets), a preprocessor scripting language that is interpreted into CSS and provides additional features beyond traditional CSS like nesting rules, variables, mixins, inheritance, and directives. It can save time and bytes by reducing code duplication and improving readability and flexibility. Sass has two main syntax styles and supports features like nested rules, variables of different data types, arithmetic operations, mixins, inheritance, and directives. Compass is a popular Sass framework that adds pre-built mixins, helper functions, a sprite image generator, and more. The document provides examples of how Sass can be used to structure a project with Bootstrap and customize elements like buttons, lightboxes, and

1. YDN
BRAND
say hello.

2. SASS
Syntactically Awesome Stylesheets
nah'mean?

3. SASS
●
●
●
●
preprocessor
metalanguage
interpreted into CSS
providing mechanisms available in traditional
programming languages
● adding:
○
○
○
○
○
○
nested rules
variables
mixins
inheritence
directives
....

4. Why?
●
●
●
●
●
save bytes
save time
readability
flexibility
frontend eco system

5. Syntax
● the same old song:
● brackets or no brackets?
CSS style
easily readable
*.scss
ruby style
less code
*.sass

6. Features
lean back.

7. Nested rules
nesting CSS rules within one another

8. Variables
uhhm, variables.

9. Variables data types
● numbers
○ e.g. 1.2, 13, 10px
● strings
○ e.g. "foo", 'bar', baz
● colors
○ e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)
● booleans
○ e.g. true, false nulls
● lists of values
○ e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

10. Operations
standard arithmetic operations

11. Mixins
define styles that can be re-used
throughout the stylesheet

12. Inheritence
tell one selector to inherit all the styles
of another without duplicating the CSS
properties

13. Directives
basic control directives

14. Directives
for directives

15. Compass
SASS Framework
add some sugar.

16. Compass
● SASS Framework
● adding:
○
○
○
○
out of the box mixins
helper functions
sprite generator
...

17. Mixins
●
cross browser mixins

18. Mixins
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Background Clip
Background Origin
Background Size
Border Radius
Box Shadow
Box Sizing
Font Face
Images
Inline Block
Opacity
Text Shadow
Transform
Transition
...
●
●
●
●
Resets
Links
Lists
Text

19. Helpers
●
color helpers

20. Sprites
pain in the ass if you do it yourself

21. Sprites
easily generate sprites of a folder's
image files

22. Case study
this is how we do it

23. EPSON - Beam your X-Mas Story

24. Structure

25. Structure

26. Structure
SASS config file

27. Structure
Compiler entry point
(files without leading underscore)

28. Structure
Twitter Bootstrap + project config

29. Structure
project files
twitter bootstrap files

30. Structure
style.scss
only import required bootstrap components
_config.scss
Twitter Bootstrap
Project

31. Structure
e.g. Google Webfont imports
any form related elements
Unique elements with IDs, e.g. #header, #logo
e.g. Button mixins
Modules: Buttons, Lists, Tabs, Pagination, Dialogs
e.g. jQuery UI stylesheets
Basic elements e.g. body
e.g. common shared gradients
Import sprites
Headlines, paragraphs

32. Element examples

33. Buttons
Twitter Bootstrap
(not modified)
Project
Button styles
.btn .btnprimary
.btn
.btn .btn-success .btn-large
.btn

34. Lightbox

35. Lightbox

36. Lightbox

37. Lightbox

38. Lightbox

39. Questions?