Slides from the Raleigh Web Design Meetup Group discussion on Sass 10/14/2014

1. Syntactically Awesome Style Sheets

2. Getting Started
Command Line
• http://rubyinstaller.org/
• Open Ruby CMD -> gem install sass
• Sass –v to check version
• Navigate to styles directory
• ‘Watch” the .scss file for updates
• sass --watch main.scss:main.css
• sass --watch main.scss:main.css --style compressed
• Style Types:
• nested, expanded, compact, compressed

3. Getting Started
http://mhs.github.io/scout-app/

4. Getting Started
Scout allows the configuration of individual project settings and
compiling formats.

5. The Benefits of Detecting Redundant Styles

6.  A cleaner, more organized working codebase
 Quicker updates and creation of styles
 Optimized and more efficient compiled CSS
 Save time from bottlenecks
(ie: vendor-prefixes)

7. Getting Cozy with Nesting

8. #main-list {
list-style: none;
float: left;
margin: 0;
li {
padding: 5px 10px;
background: #333;
a {
color: #333;
text-decoration: none;
}
}
}
Getting Cozy with Nesting
#main-list {
list-style: none;
float: left;
margin: 0;
}
#main-list li {
padding: 5px 10px;
background: #333;
}
#main-list li a {
color: #333;
text-decoration: none;
}

9. a {
text-decoration: none;
color: #333;
&:hover {
color: #aaa;
}
}
Getting Cozy with Nesting
.featured-image {
display: none;
&.active {
display: block;
}
}
a {
text-decoration: none;
color: #333;
}
a:hover {
color: #aaa;
}
.featured-image {
display: none;
}
.featured-image.active {
display: block;
}

10. Consistency through $Variables

11. Consistency through $Variables
Variables Types
$background-color: #58a611;
$img-path: “img/";
$isSet: true;
$margins: 1em 1.5em 0 0;
$map: (key1: value1, key2: value2, key3: value3);

12. $background-color: #58a611;
$img-path: “img/";
Consistency through $Variables
body {
background: url(#{$img-path}/bg.jpg) $background-color;
}
body {
background: url(img/bg.jpg) #58a611;
}

13. Breaking Out the @Mixins

14. @mixin the-mixin-name() {
// Block of Styles
}
Breaking Out the @Mixins
Basic Syntax
.theClass {
@include the-mixin-name;
}

15. @mixin the-mixin-name($theSize) {
width: $theSize + px;
}
Breaking Out the @Mixins
Parameter Syntax
.theClass {
@include the-mixin-name(100);
}
.theClass {
width: 100px;
}

16. @mixin the-mixin-name($theSize: 50) {
width: $theSize + px;
}
Breaking Out the @Mixins
Parameter Defaults Syntax
.theClass {
@include the-mixin-name();
}
.theClass {
width: 50px;
}

17. @mixin color-class($theName, $theColor) {
.#{$theName} {
color: $theColor;
}
}
Breaking Out the @Mixins
.blueberry {
color: #1f3e68;
}
@include color-class(‘blueberry', #1f3e68);

18. @mixin color-class($theName, $theColor) {
.#{$theName}, .#{$theName} a, .#{$theName} a:visited, .#{$theName} a:link, .#{$theName} a:active {
color: $theColor;
}
.#{$theName} a:hover {
color: lighten($theColor, 10%);
}
}
Breaking Out the @Mixins
.blueberry, .blueberry a, .blueberry a:visited, .blueberry a:link, .blueberry a:active {
color: #1f3e68;
}
.blueberry a:hover {
color: #2b558f;
}

19. Breaking Out the @Mixins
http://chir.ag/projects/name-that-color/

20. $context: 14;
@mixin font-class($font, $line: $font) {
$line: ($line / $font);
$font: ($font / $context);
font-size: $font + em;
line-height: $line + em;
}
Breaking Out the @Mixins
.medium {
@include font-class(16,19);
}
.medium {
font-size: 1.14286em;
line-height: 1.1875em;
}

21. @mixin font-family($fam, $file, $class) {
@font-face {
font-family: '#{$fam}';
src: url('#{$font-path}#{$file}.eot');
src: url('#{$font-path}#{$file}.eot?#iefix') format('embedded-opentype'),
url('#{$font-path}#{$file}.woff') format('woff'),
url('#{$font-path}#{$file}.ttf') format('truetype'),
url('#{$font-path}#{$file}.svg##{$fam}') format('svg');
font-weight: normal;
font-style: normal;
}
.#{$class} {
font-family: '#{$fam}';
}
}
Breaking Out the @Mixins

22. @font-face {
font-family: "helvlightregular";
src: url("fonts/heln.eot");
src: url("fonts/heln.eot?#iefix") format("embedded-opentype"), url("fonts/heln.woff") format("woff"), url("fonts/heln.ttf")
format("truetype"), url("fonts/heln.svg#helvlightregular") format("svg");
font-weight: normal;
font-style: normal;
}
.helvlightregular {
font-family: "helvlightregular";
}
Breaking Out the @Mixins
@include font-family('helvlightregular','heln','helvlightregular');

23. @mixin transform($style) {
-webkit-transform: #{$style};
-moz-transform: #{$style};
-ms-transform: #{$style};
-o-transform: #{$style};
transform: #{$style};
}
Breaking Out the @Mixins
@include transform(rotate(6deg)); -webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);

24. Getting @Functional

25. $context: 14;
@function element-size($size, $theContext:$context) {
$size: ($size / $theContext);
@return $size + em;
}
Getting @Functional
.pineapple {
width: element-size(300);
height: auto;
border: 0;
}
.pineapple {
width: 21.42857em;
height: auto;
border: 0;
}

26. Under One…Maybe Two Conditions

27. @mixin yin-yang($isActive) {
@if ($isActive) {
display: block;
} @else {
display: none;
}
Under One…Maybe Two Conditions
.yang {
@include yin-yang(true);
}
.yang {
display: block;
}

28. @mixin general-styles($theView) {
#header-main {
Under One…Maybe Two Conditions
@if $theView == full or $theView == mid or $theView == tablet {
padding: 3px 0;
height: element-size(100);
} @else if $theView == smart {
height: element-size(50);
} @else {
height: element-size(170);
}
}
}
@include general-styles(full);

29. Under One…Maybe Two Conditions
@media only screen and (max-width: 25.875em) {
@include universal-styles(dumb);
@include global-styles(dumb);
}
@media only screen and (min-width: 25.9375em) and (max-width: 39.3125em) {
@include universal-styles(smart);
@include global-styles(smart);
}
@media only screen and (min-width: 39.375em) and (max-width: 54.625em) {
@include universal-styles(tablet);
@include global-styles(tablet);
}
@media only screen and (min-width: 54.6875em) and (max-width: 64.9375em) {
@include universal-styles(mid);
@include global-styles(mid);
}
@media only screen and (min-width: 65em) {
@include universal-styles(full);
@include global-styles(full);
}

30. Getting Straight with Loops

31. @for
-@for $var from <start> through <end> // Includes a loop for the <end> value
- @for $var from <start> to <end> // Stops looping when <end> is reached
@each
- @each $var in <list>
@while
-@while <condition is true> (ie: $i < 10)
Getting Straight with Loops
Basic Syntax

32. @for $i from 1 to 4 {
.theClass-#{$i} {
width: #{$i}50px;
}
}
Getting Straight with Loops
@for Loop
.theClass-1 {
width: 150px;
}
.theClass-2 {
width: 250px;
}
.theClass-3 {
width: 350px;
@for $i from 1 through 4 { }
.theClass-#{$i} {
width: #{$i}50px;
}
}
.theClass-4 {
width: 450px;
}

33. $countries: sweden, denmark, finland, norway, germany;
@each $country in $countries {
.flag-#{$country} {
background: url(img/#{$country}.png);
}
}
Getting Straight with Loops
@each Loop
.flag-sweden {
background: url(img/sweden.png);
}
.flag-denmark {
background: url(img/denmark.png);
}
.flag-finland {
background: url(img/finland.png);
}
.flag-norway {
background: url(img/norway.png);
}
.flag-germany {
background: url(img/germany.png);
}

34. $countries: (sweden: #006699, denmark: #cc0000, finland: #fff, norway: #ef2b2c);
@each $country, $color in $countries {
.flag-#{$country} {
background: url(img/#{$country}.png) $color;
}
}
Getting Straight with Loops
@each Loop
.flag-sweden {
background: url(img/sweden.png) #006699; }
.flag-denmark {
background: url(img/denmark.png) #cc0000; }
.flag-finland {
background: url(img/finland.png) #fff; }
.flag-norway {
background: url(img/norway.png) #ef2b2c; }

35. $hotspots: 3;
$i: 1;
@while $i <= $hotspots {
.hotspot-#{$i} {
top: 100px;
left: 100px;
}
$i: $i+1;
}
Getting Straight with Loops
@while Loop
.hotspot-1 {
top: 100px;
left: 100px;
}
.hotspot-2 {
top: 100px;
left: 100px;
}
.hotspot-3 {
top: 100px;
left: 100px;
}

36. http://www.bourbon.io

37. @Yuschick http://sass-lang.com/