Everything you need to know about Sass for web app design, along with useful mixin examples!

1. Building Mobile Web Apps
📱 with LESS / Sass / Stylus
Speed up your front-end workflow with CSS
preprocessors.
Mobile Camp Los Angeles
Jake Johnson
October 18, 2012

3. Kansas City, MO

4. [ Delicious stack of ribs intentionally removed due to presentation timing ]
BBQ Capital of the World

10. Clean HTML & CSS

11. Empower developers to go
further, faster.

18. +
CSS3 Mixins, Automatic Spriting, Reusable
Patterns

19. If you like Compass use Sass.

20. If you want max speed use Stylus.

22. Overview
1 Getting Started
2 Sass Essentials
3 Placeholders & Style Patterns
4 Compass Essentials
5 The Future: OOCSS & SMACSS

23. Why I ♥ Sass
Clean, beautiful syntax.
Reusable mixins and patterns.
Responsive design is much
easier.
Speeds up my workflow.

24. FYI... it’s Sass not SASS!

25. Getting Started
sudo gem install compass
compass create
compass watch
http://incident57.com/codekit/ http://mhs.github.com/scout-app/
http://livereload.com/ http://smalify.net/
http://compass.handlino.com/

26. Variables

27. VARIABLES IN ACTION
Color Schemes

28. VARIABLES IN ACTION
Background URL Paths

29. VARIABLES IN ACTION
Default Dimensions

30. VARIABLES IN ACTION
Quick Layout Switching

31. Operations
+ - * / %

32. OPERATIONS IN ACTION
Responsive Web Design Formula
Target / Context =
Result
config.rb
http://www.alistapart.com/articles/fluidgrids/

33. OPERATIONS IN ACTION
Math and Variables

34. OPERATIONS IN ACTION
String Operations

35. Functions

36. Useful Functions
round(), ceil(), floor(), min(), max()
lighten($navyblue, 50%)
darken($maplesyrup, 40%)
saturate() / desaturate()
transparentize(#000, 20%)
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

37. Nesting

38. Nesting Selectors

39. Nesting Properties

40. Parent References
(Before)
& Before Selector Decorations:
Great for pseudo-classes like :hover, :active, :focus,
etc.

41. Parent References
(Before)
Good for classes too, especially for toggling
animations.

42. Parent References
(After)
& After Selector Decorations:
& just repeats the parent selector. What if you place
it after the selector?

43. Parent References
(After)

44. “With great power comes
great responsibility.”

45. The Inception Rule
Don’t go more than 4 levels
deep.
http://thesassway.com/beginner/the-
inception-rule
The Problem:
body body { ... }
body div.content div.container { ... }
div.container body div.content div.container div.articles { ... }
div.content body div.content div.container div.articles > div.post { ... }
div.articles body div.content div.container div.articles > div.post div.title { ... }
& > div.post body div.content div.container div.articles > div.post div.title h1 { ... }
body div.content div.container div.articles > div.post div.title h1 a { ... }
div.title body div.content div.container div.articles > div.post div.content { ... }
h1 body div.content div.container div.articles > div.post div.content p { ... }
a body div.content div.container div.articles > div.post div.content ul { ... }
div.content body div.content div.container div.articles > div.post div.content ul li { ... }
body div.content div.container div.articles > div.post div.author { ... }
p
body div.content div.container div.articles > div.post div.author a.display { ... }
ul body div.content div.container div.articles > div.post div.author a.display img { ... }
li body div.content div.container div.articles > div.post div.author h4 { ... }
div.author body div.content div.container div.articles > div.post div.author h4 a { ... }
a.display body div.content div.container div.articles > div.post div.author p { ... }
body div.content div.container div.articles > div.post div.author p a { ... }
img body div.content div.container div.articles > div.post div.author ul { ... }
h4 body div.content div.container div.articles > div.post div.author ul li { ... }
a
p
a

46. The Inception Rule
“But the rendering performance and file size isn’t
that big of a deal.”
Your styles are chained to the DOM, making
maintenance more difficult.
1) Focus on reusability for different contexts.
2) Reduce the # of selectors as much as you can.
Lower File Size, Better Rendering Performance,
Easier Maintenance. Get in the habit!

47. Google’s Recommendations
Avoid a universal key selector.
Make your rules as specific as possible.
Class and ID selectors over tag selectors.
You can still use tag selectors, but try to make them top level.
Remove redundant qualifiers.
https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors

48. Take the next two with a
grain of salt...

49. Google’s Recommendations
Avoid using descendant selectors, especially
those that specify redundant ancestors.
Use class selectors instead of descendant
selectors.
https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors

50. Just do the best you can.

51. Selector Inheritance
(@extend)

52. Inherit Styles without Duplicating
@EXTEND IN ACTION
Properties

53. Inherit Styles without Duplicating
@EXTEND IN ACTION
Properties

54. Arguments
Mixins @content Blocks
Injects into your rules

55. MIXIN EXAMPLES
Simple Media Queries

56. MIXIN EXAMPLES
Rem Font Sizing
Em: Size is relative to the parent element.
Rem: Size is relative to the root element <html>.

57. MIXIN EXAMPLES
Font Family Sets

58. MIXIN EXAMPLES
Font Weight Sets

59. MIXIN EXAMPLES
Image Replacement
http://nicolasgallagher.com/another-css-image-replacement-technique/

60. MIXIN EXAMPLES
Margin / Padding Resets

61. Placeholders

62. Inherit Styles without Duplicating
@EXTEND IN ACTION
Properties

63. Placeholder Example
Similar to class @extends, but silent. No code bloat.
Use as style patterns. Non-semantic CSS modules.

64. Placeholder vs. Class
@extend
Placeholder (Silent) Class @extend

65. Less Class Bloat
DRY Sass
DRY Compiled CSS

66. Advantages of Placeholders vs.
Mixins
Combined with Selectors, Not Injected
Leaner Compiled CSS
Use Mixins for @content Support

68. COMPASS MIXINS
Cross-Browser CSS3
Appearance Font Face
Background Clip Hyphenation
Background Origin Images / Gradients
Background Size Inline Block
Border Radius Opacity
Box (Flex Box) CSS Regions
Box Shadow Text Shadow
Box Sizing Transform
Columns Transition
Filter

69. COMPASS MIXINS
CSS3 for Mobile
+box-sizing(border-
Flex Box for Portrait
box)
& Landscape
Variable Widths

70. COMPASS FUNCTIONS
Helper Functions
adjust-lightness() image-height() stylesheet-url()
adjust-saturation() image-url() scale-lightness()
append-selector() inline-font-files() shade()
color-stops() inline-image() tan()
cos() log() tint()
css2-fallback() nest() -css2()
e() pow() -moz()
elements-of-type() prefix() -ms()
enumerate() prefixed() -o()
font-files() pi() -pie()
font-url() sin() -svg()
headings() sqrt() -webkit()
image-width()

71. COMPASS MIXINS
Automatic Spriting

72. COMPASS MIXINS
Typography
Links Lists Text
Hover Link Bullets Ellipsis
Link Colors Horizontal List Force Wrap
Unstyled Link Inline-Block List No Wrap
Inline List Text Replacement

73. COMPASS MIXINS
General Utilities
+Clearfix
Float Hacks Minimums Reset Tag
Cloud

74. OOCSS: Object Oriented
CSS
Faster Websites Easier Maintenance
Rapid Iteration & Testing

75. Principle #1
Separate Structure and Skin

76. Principle #2
Separate Container and Content
Avoid Complicated Nesting
What we’ve been learning all along!

77. OOCSS Basic Tips
Don’t make your base element styles dependent
on its surrounding DOM.
Add semantic classes to elements and use Sass
placeholder patterns to skin.
You can still use IDs in your markup for
JavaScript. Use classes for reusability.

78. http://csslint.net/

79. Going Further
http://smacss.com/book/
https://github.com/stubbornella/oocss

80. Thank You!
✉
jake@divshot.com @jakejohnson