raleigh web design meetup group - sass presentation

Syntactically Awesome Style Sheets

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

Getting Started

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

Getting Started

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

The Benefits of Detecting Redundant Styles

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)

Getting Cozy with Nesting

#main-list {list-style: none;float: left;margin: 0;li {

padding: 5px 10px;background: #333;a {

color: #333;text-decoration: none;

}}

}


#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;

}

a {text-decoration: none;color: #333;&:hover {

color: #aaa;}

}


.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;}

Consistency through $Variables

$background-color: #58a611;

$img-path: “img/";

$isSet: true;

$margins: 1em 1.5em 0 0;

$map: (key1: value1, key2: value2, key3: value3);


Variables Types

$background-color: #58a611;$img-path: “img/";

body {background: url(#{$img-path}/bg.jpg) $background-color;

}


body {background: url(img/bg.jpg) #58a611;

}

Breaking Out the @Mixins

@mixin the-mixin-name() {

// Block of Styles

}


Basic Syntax

.theClass {@include the-mixin-name;

}

@mixin the-mixin-name($theSize) {

width: $theSize + px;

}


Parameter Syntax

.theClass {@include the-mixin-name(100);

}

.theClass {width: 100px;

}

@mixin the-mixin-name($theSize: 50) {

width: $theSize + px;

}


Parameter Defaults Syntax

.theClass {@include the-mixin-name();

}

.theClass {width: 50px;

}

@mixin color-class($theName, $theColor) {.#{$theName} {

color: $theColor; }

}


.blueberry {color: #1f3e68;

}

@include color-class(‘blueberry', #1f3e68);

@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%);}

}


.blueberry, .blueberry a, .blueberry a:visited, .blueberry a:link, .blueberry a:active {color: #1f3e68;

}

.blueberry a:hover {color: #2b558f;

}


http://chir.ag/projects/name-that-color/

$context: 14;@mixin font-class($font, $line: $font) {

$line: ($line / $font);$font: ($font / $context);font-size: $font + em;line-height: $line + em;

}


.medium {@include font-class(16,19);

}

.medium {font-size: 1.14286em;line-height: 1.1875em;

}

@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}';

}}


@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";

}


@include font-family('helvlightregular','heln','helvlightregular');

@mixin transform($style) {-webkit-transform: #{$style};-moz-transform: #{$style};-ms-transform: #{$style};-o-transform: #{$style};transform: #{$style};

}


@include transform(rotate(6deg)); -webkit-transform: rotate(6deg);-moz-transform: rotate(6deg);-ms-transform: rotate(6deg);-o-transform: rotate(6deg);transform: rotate(6deg);

Getting @Functional

$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;

}

Under One…Maybe Two Conditions

@mixin yin-yang($isActive) {@if ($isActive) {

display: block;} @else {

display: none;}


.yang {@include yin-yang(true);

}

.yang {display: block;

}

@mixin general-styles($theView) {#header-main {

@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);

@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);


@include universal-styles(tablet);@include global-styles(tablet);


@include universal-styles(mid);@include global-styles(mid);

}@media only screen and (min-width: 65em) {

@include universal-styles(full);@include global-styles(full);

}


Getting Straight with Loops

@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)


Basic Syntax

@for $i from 1 to 4 {.theClass-#{$i} {

width: #{$i}50px;}

}


@for Loop

.theClass-1 {width: 150px;

}


}


}@for $i from 1 through 4 {.theClass-#{$i} {

width: #{$i}50px;}

}


}

$countries: sweden, denmark, finland, norway, germany;@each $country in $countries {

.flag-#{$country} {background: url(img/#{$country}.png);

}}


@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);

}

$countries: (sweden: #006699, denmark: #cc0000, finland: #fff, norway: #ef2b2c);@each $country, $color in $countries {

.flag-#{$country} {background: url(img/#{$country}.png) $color;

}}


@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; }

$hotspots: 3;$i: 1;

@while $i <= $hotspots {.hotspot-#{$i} {

top: 100px;left: 100px;

}$i: $i+1;

}


@while Loop

.hotspot-1 {top: 100px;left: 100px;

}


}


}

http://www.bourbon.io

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

raleigh web design meetup group - sass presentation

Design