Saturday Class

1. Sass & Compass
with Rob Davarnia

2. About me
Rob Davarnia
@robdvr
Full Stack Developer, Founder of ParseLabs
Passionate about Ruby on Rails, Node.js, and Angular
robdvr.com // parselabs.com

3. Sass History
Designed by: Hampton Catlin
Developed by: Natalie Weizenbaum, Chris Eppstein
Since 2007
Started as a Ruby gem

4. What’s Sass?
Sass is a CSS Pre-Processor.

5. What’s a Pre-Processor?
Sass File Sass Compiler CSS File

6. Pre-Processor Example
p {
color: #333;
a {
color: #555;
}
}
p {
color: #333;
}
p a {
color: #555;
}

7. Can browsers compile Sass?
No. You need to compile it before using it.

8. Why Sass?
CSS is simple, but simple is not necessarily scalable.
Sass teaches CSS new tricks.
Variables, Functions, and more…

9. Sass vs. Scss
Different syntax
Read more
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

10. What’s Compass?
A library filled with useful CSS functions built on Sass.
ex. Cross-Browser CSS3 Rounded Corners

11. What’s Grunt?
A JavaScript-based task runner to perform repetitive tasks.
Grunt + Sass Gem help us compile Sass.

12. How does Grunt work?
Grunt performs tasks you create like compiling Sass

13. Grunt Settings
Gruntfile.js includes all the settings for grunt

14. Demo: Grunt Overview

15. Setting up Grunt / Folders
robdvr.com/blog

16. Lab (Grunt Setup)

17. CSS Brush up
// dot - classes - okay to repeat
.wrapper
// hashtag - ids (unique)
#wrapper

18. CSS Brush up 2
// Color
color: #000;
// Size
font-size: 20px;
// Text Alignment
text-align: center;
// Text Bold
font-weight: bold;
// Text Italic
font-style: italic;
// Text Underline
text-decoration: underline;
// Spacing - top right bottom left
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
// Border
border: 1px solid #000;

19. Let’s get Sassy!

20. Nesting
.wrapper {
border: 1px solid #333;
p {
color: #333;
}
}
.wrapper {
border: 1px solid #333;
}
.wrapper p {
color: #333;
}
SCSS CSS

21. Lab (Nesting)
<h1> Heading <span>Text</span> </h1>
1. Create an h1 element
2. Create a span tag nested
3. Make the h1 color blue
4. Make the span color red

22. Nesting Properties
SCSS CSS
.page {
text: {
align: center;
transform: uppercase;
}
}
.page {
text-align: center;
text-transform: uppercase;
}

23. Parent Selector (&)
SCSS CSS
h3 {
color: #000;
&.red {
color: #ff0000;
}
}
h3 {
color: #000;
}
h3.red {
color: #ff0000;
}

24. Parent Selector 2 (&)
.sidebar {
color: #000;
.users & {
color: #ff0000;
SCSS CSS
}
}
.sidebar {
color: #000;
}
.users .sidebar {
color: #ff0000;
}

25. Lab (Parent Selector)
<a href=“#” class=“nav-link”> Link1 </h1>
<a href=“#” class=“page-link”> Link2 </h1>
1. Copy the HTML elements above
2. Use the nested syntax with parent selector to
make .nav-link underlined and .page-link font-size
20px

26. Nesting Pitfall
Don’t nest more than 3-4 levels!

27. Variables
$orange: #FFA500;
p {
color: $orange;
}
SCSS

28. Variables 2 - Strings
$primary: 'Montserrat', sans-serif;
body {
font-family: $primary;
}
SCSS

29. Lab (Variables)
1. Create a variable containing black hex color (#000)
2. Use the variable to set a paragraph’s color
3. Examine the output

30. Variables 3 - Strings
$dark: #333;
.wrapper {
border: 1px solid $dark;
p {
color: $dark;
}
}
.wrapper {
border: 1px solid #333;
}
.wrapper p {
color: #333;
}
SCSS CSS

31. Variables 4 - Lists
$icons: facebook, twitter, instagram;
$padding: 20px 10px 30px 40px;
SCSS

32. Lab (Variables)
1. Create a variable containing 4 margin placements
(top right bottom left)
2. Use the variable to set a paragraph’s margin
3. Examine the output

33. Variables 5 - Null
$icons: null;
SCSS

34. Variables 6 - Overwriting
$mainColor: #000;
SCSS CSS
h2 {
$mainColor: #fff;
background: $mainColor;
}
p {
background: $mainColor;
}
h2 {
background: #fff;
}
p {
background: #000;
}

35. Variables 7 - Names
SCSS CSS
$side: bottom;
h1 {
border-#{$side}: 1px solid #000;
}
.link-#{$side} {
background: #333;
}
h1 {
border-bottom: 1px solid #000;
}
.link-bottom {
background: #333;
}

36. Lab (Variables)
1. Create a variable that contains value “top”
2. Use the name variable output syntax to dynamically
set heading2’s border value to “1px solid #000”
3. Examine the output
(output should be border-top: 1px solid #000)

37. Comments
// This comment will not
// get compiled
/* This comment will compile */
/* This comment will compile */
SCSS CSS

38. Import
Compiler will import typorgraphy.scss to the working file.
@import 'typography';
SCSS

39. Partials
Adding an underline before the filename makes a partial.
Compiler will not compile to .css.
_typography.scss
@import 'typography';
SCSS

40. Lab (Partials)
1. Create a partial named ‘buttons’
2. Import the buttons partial in your style.scss
3. Set a link element’s text to underline in ‘buttons’
partial
4. Save and examine the compiled output (style.css)

41. Mixins
Reusable pieces of code

42. Why use mixins?
.button1 {
color: #000;
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
}
.button2 {
color: #bbb;
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
}
Avoid code repetition

43. Basic Mixin
@mixin button {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
}
.button1 {
@include button;
color: #000;
}
.button2 {
@include button;
color: #bbb;
}

44. Better with Mixins
@mixin button {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
}
.button1 {
@include button;
color: #000;
}
.button2 {
@include button;
color: #bbb;
}
We still have repetition
.button1 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #000;
}
.button2 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #bbb;
}
SCSS CSS

45. Lab (Basic Mixin)
1. Create a basic mixin that sets the background and
font size
2. Use the mixin to create 2 ‘div’ elements
3. Make the font italic on one div
4. Save and examine the compiled output (style.css)

46. Avoiding Repetition
@mixin button {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
}
.button1,
.button2 {
@include button;
}
.button1 {
color: #000;
}
.button2 {
color: #bbb;
}
.button1,
.button2 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
}
.button1 {
color: #000;
}
.button2 {
color: #bbb;
}
SCSS CSS

47. Avoiding Repetition
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
border: 1px solid #000;
}

48. Mixin Arguments
Make mixins more powerful
@mixin border-radius( $radius ) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
div {
@include border-radius(5px);
padding: 20px;
border: 1px solid #000;
}
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
border: 1px solid #000;
}
SCSS CSS

49. Mixin Argument Defaults
@mixin border-radius( $radius: 5px ) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
SCSS CSS
}
div {
@include border-radius;
}
p {
@include border-radius(9px);
}
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
p {
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}

50. Multiple Mixin Arguments
@mixin button($color, $radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
color: $color;
SCSS CSS
}
.btn {
@include button(#333, 5px);
border: 1px solid #000;
}
.btn {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #333;
border: 1px solid #000;
}

51. Lab (Arguments Mixin)
1. Create a mixin that takes 2 arguments. First argument
should be for font size, and second argument should take
the color
2. Use the mixin to create 1 ‘a’ element
3. Make the font size 12px and color #999 using the mixin
4. Save and examine the compiled output (style.css)

52. Extend
Pieces of code that exactly match

53. Why use extend?
.button1 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #000;
[
[
}
.button2 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #bbb;
}

54. How to extend?
.button1 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #000;
}
.button2 {
@extend .button1;
color: #bbb;
}
.button1, .button2 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #000;
}
.button2 {
color: #bbb;
}
SCSS CSS

55. Lab (Extend)
1. Create two paragraph properties (.first-p, .second.p)
2. Add two CSS properties to .first-p
3. Extend .first-p on .second-p
4. Save and examine the compiled output (style.css)

56. Extend Pitfalls
Changing the parent changes all the children
CSS Bloat! If not needed, don’t include
User placeholder selectors to avoid making unwanted changes

57. Placeholder Selectors (%)
Used for extending but can’t be used on their own

58. Extend without Placeholder
.button1 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #000;
}
.button2 {
@extend .button1;
color: #bbb;
}
.button1, .button2 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #000;
}
.button2 {
color: #bbb;
}
SCSS CSS

59. Extend with Placeholder
%button {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #000;
}
.button1 {
@extend %button;
}
.button2 {
@extend %button;
color: #bbb;
}
.button1, .button2 {
background: #e2e2e2;
border-bottom: 1px solid #444;
padding: 20px;
color: #000;
}
.button2 {
color: #bbb;
}
SCSS CSS

60. Lab (Placeholder)
1. Create a paragraph property (.first-p)
2. Create a placeholder selector
3. Add two CSS properties to placeholder selector
4. Extend the placeholder selector on .first-p
5. Save and examine the compiled output (style.css)

61. Functions
Return a value

62. Basic Function
@function fluid($width, $total) {
@return ($width / $total) * 100%;
SCSS CSS
}
.content {
width: fluid(600px, 900px);
}
.content {
width: 66.66667%;
}

63. Lab (Function)
1. Create a function that returns (25%)
2. Create a div selector
3. Set the div width using the function
4. Save and examine the compiled output (style.css)

64. Conditions / Comparisons

65. If/else statement
$theme: light;
SCSS CSS
body {
@if $theme == dark {
color: #FFF;
} @else {
color: #000;
}
}
body {
color: #000;
}

66. If/elseif/else statement
$theme: light;
SCSS CSS
body {
@if $theme == dark {
color: #FFF;
} @else if $theme == orange {
color: #222;
} @else {
color: #000;
}
}
body {
color: #000;
}

67. Lab (Function)
1. Create a variable named $type set to “desktop”
2. Create a div selector
3. Write an if statement that checks $type
4. Set the div’s width to 100% if the $type is NOT
desktop

68. Comparisons
== equal to
!= not equal to
> greater than *
>= greater than or equal to *
< less than *
<= less than or equal to *
*numbers only

69. For each loop

70. For each loop example
SCSS
CSS
$icons: facebook, twitter, instagram;
@each $icon in $icons {
.icon-#{$icon} {
background-image: url(#{$icon}.png);
}
}
.icon-facebook {
background-image: url(facebook.png);
}
.icon-twitter {
background-image: url(twitter.png);
}
.icon-instagram {
background-image: url(instagram.png);
}

71. Lab (For each)
1. Create a list of names (3 items is sufficient)
2. Create a link selector (a element)
3. Write a for each loop that goes through the list and
outputs a custom class for each element
4. Set the link’s background-image to each item’s name

72. For loop

73. For loop example
SCSS CSS
$i: 1;
.link {
background: #333;
@for $i from 1 through 4 {
&.link-#{$i} {
margin-right: $i * 20px;
}
}
}
.link {
background: #333;
}
.link.link-1 {
margin-right: 20px;
}
.link.link-2 {
margin-right: 40px;
}
.link.link-3 {
margin-right: 60px;
}
.link.link-4 {
margin-right: 80px;
}

74. While loop

75. While loop example
SCSS CSS
$i: 1;
.link {
background: #333;
@while $i < 4 {
&.link-#{$i} {
margin-right: $i * 20px;
}
$i: $i + 1;
}
}
.link {
background: #333;
}
.link.link-1 {
margin-right: 20px;
}
.link.link-2 {
margin-right: 40px;
}
.link.link-3 {
margin-right: 60px;
}
.link.link-4 {
margin-right: 80px;
}

76. Lab (While loop)
1. Create a number variable set to 5
2. Create a while loop that loops based on your
variable
3. Output a custom class with a calculated margin-left
…
.image-#{$i} {
margin-left: $i * 20px;
}
…

77. Mixins vs. Extend vs. Functions
Mixins: similar sets of properties used with small variations
Extend: sets properties that match exactly
Functions: common operations that return values

78. Math with Sass!

79. Math Operations
+ addition
- subtraction
* multiplication
/ division
% modulo

80. Addition example
SCSS CSS
.link {
font-size: 12px + 14px;
}
.link {
font-size: 26px;
}

81. String Concat
SCSS
CSS
.link {
font-family: ‘Helvetica’ + ’, sans-serif’;
}
.link {
font-family: ’Helvetica, sans-serif’;
}

82. Math Utilities
round($number) - round to closest whole number
ceil($number) - round up
floor($number) - round down
abs($number) - absolute value
min($list) - minimum list value
max($list) - maximum list value
percentage($number) - convert to percentage

83. Lab (Math Utilities)
1. Create a paragraph
2. Set the font-size to the ceiling number of 11.5px
3. Save and review the output

84. Colors with Sass!

85. Color & Math
$base: #333;
SCSS CSS
.addition {
background: $base + #112233;
}
.subtraction {
background: $base - #112233;
}
.multiplication {
background: $base * 2;
}
.division {
background: $base / 2;
}
.addition {
background: #445566;
}
.subtraction {
background: #221100;
}
.multiplication {
background: #666666;
}
.division {
background: #191919;
}

86. Color Utilities
color: lighten($color, 20%);
color: darken($color, 20%);
color: saturate($color, 20%);
color: desaturate($color, 20%);
color: mix(#ffff00, #107fc9); }}
color: mix(#ffff00, #107fc9, 30%);
color: grayscale($color);
color: invert($color);
color: complement($color);

87. More Color Utilities
http://sass-lang.com/documentation/Sass/Script/Functions.html

88. Lab (Colors)
1. Create a color variable set to black - #000
2. Create a paragraph element
3. Use the lighten function to make the paragraph’s
color 50% lighter

89. What’s Compass?
A library filled with useful CSS functions built on Sass.
ex. Cross-Browser CSS3 Rounded Corners

90. Compass Features
• CSS3 mixins
• Typography mixins
• Utilities
• Layout Module
• Reset Module

91. Compass Mixins
• border-radius
• opacity
• box-shadow
• text-shadow
• transition
• background-size
• font-face
• flexbox

92. All Compass Mixins
http://compass-style.org/index/mixins/

93. Lab (Border Radius)
1. Create div with black background
2. Import Compass
3. Using Compass’ border-radius mixin, set the div’s
radius to 10px

94. Compass CSS3 Mixin Examples
http://compass-style.org/examples/

95. New Compass Project
$ gem install compass
$ compass create <myproject>
http://compass-style.org/install/

96. Watching for changes
$ compass watch

97. Using Compass in Grunt
@import ‘compass’;

98. Further Compass Features
• Grid system
• Sprite generations
• and more
• http://compass-style.org/

99. Read more…
http://sass-lang.com/
http://compass-style.org
http://gruntjs.com/

100. Thanks for coming!
Q/A, Feedback, Comments, Suggestions