Simple introduction Sass

Sass(Syntactically Awesome Style Sheets)

What is it good for…

What is Sass?

“Sass is a meta-language on top of CSS that's used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable style sheets.” - from http://sass-lang.com/

“Sass is an extension of CSS3, adding nested rules, Variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.”- from internet

http://sass-lang.com/

a little history…..

• Sass was first given life by Hampton Catlin in 2006, later supported by Natalie weizembaum and chris eppstein

• Sass started life in ruby community • Sass supports two syntaxes

– Indentation syntax with file ext .sass– Css compatible syntax with file ext .SCSS

• Sass is free to use, require no license.

Why use it?

• Modularize (@import)

• Variables for maintainability

• Mixins improves reusability

• Reduces redundant rules (keep it DRY)

• Scalable and Maintainable

Make writing style more fun….

How do I install sass on my computer…

• On Mac just run “gem install sass”

• On Windowdownload and install ruby (http://rubyinstaller.org/) on cmd prompt - run

“gem install sass”

Data Types support by sass

• SassScript supports Seven data types // number example 10, 40, 50px, 60%

//string example “foo”, “bar”, baz

//colors example blue, #04a3f9, rgba(255, 0, 0, 0, 5)

//booleans example true or false

//Nullexample null

//list

example

$awesome-list: “.bar” “.foo” “.odd”

//maps or hashexample

$alist: (error: red, warn: blue, done: green)

Lets learn to read sass

• Variables

// sass syntax defining the variables

$red: #ff0b13 $blue-color: #091fff

p color: $red

//scss syntax defining the variables $red: #ff0b13; $blue-color: #091fff;

p {color: $red; }


•Nesting Rules

//sass syntax coloring the p tag inside #id “awesome”

$common-color: red div#awesome p color: $common-color a color: blue &:hover color: yellow

//scss syntax defining the variables $common-color: red;

div#awesome { p {

color: $common-color; a { color: blue; &:hover{ color: yellow; } } } }


Module structure with @import

//sass syntax // main.sass @import navigation @import morestyle

bodymax-width: 1200pxmargin: auto

// “_morestyle.sass”

div margin: auto padding-top: 5px

//scss syntax // main.scss @import “navigation” @import “morestyle” *{ box-sizing: border-box; }

body { max-width: 1200px;

margin: auto; }// “_morestyle.scss” div{ margin: auto; padding-top: 5px; }


•chaining selectors

//sass syntax $link-color: blue .content color: yellow &.main-container a color: $link-color

.main-container,

.mobile-container width: 100%

//scss syntax $link-color: blue;

.content {color: yellow;&.main-container {

a { color: $link-

color;} } } .main-container,.mobile-container{ width: 100 }


@extend directive to extend existing rules•

//sass syntax

$box-color: yellow

.box width: 100px height: 200px background-color: $box-color

.container @extend .box

//scss syntax

$box-color: yellow .box { width: 100px; height: 200px;}

.container {@extend .box

}


@extend directive with placeholder•

//sass syntax

$box-color: yellow

%box width: 100px height: 200px background-color: $box-color

.container @extend %box

//scss syntax

$box-color: yellow %box { width: 100px; height: 200px;}

.container {@extend %box

}


@mixins •

//sass syntax

@import compass

=bs($width,$height: $width) width: $width height: $height .square +bs(100px) +clearfix //compass mixin

//scss syntax

@import “compass”;@mixin bs($width,$height: $width) { width: $width height: $height}

.square{@include bs(100px)

@include clearfix //compass mixin }


@function directive •

//sass syntax

@import compass$color: green// function shuld return@function double($value)

@return $value*2

.square width:double(100px) background-color: shade($color,60%)

//scss syntax

@import “compass”;$color: green;// function shuld return @function double($value)

@return $value*2

.square { width:double(100px) background-color: shade($color,60%);}


Programmatic Logic (Math calculations with Sass)

•

//sass syntax

.additionwidth: 20% + 50%

.subheight: 20px - 10px

.division top: (500/2)

.mulwidth: 200px * 2

//scss syntax

.addition {width: 20% + 50%; }

.sub {height: 20px - 10px; }

.division {top: (500/2); }

.mul {width: 200px * 2; }


Programmatic Logic (control directive in sass) •

//sass syntax

$color-theme: orange$color-brand: $color-theme

@if $color-theme == pink $color-brand: pink@else if $color-theme == orange $color-brand: #ff9900

.brand background-color: $color-brand

//scss syntax

$color-theme: orange;

@if $color-theme == pink {

$color-brand: pink;

} @else if $color-theme == orange {

$color-brand: #ff9900;

}

.brand { background-color: $color-brand }


Programmatic Logic (control directives in sass) •

//sass syntax

$color-theme: orange$color-brand: $color-theme

@if $color-theme == pink $color-brand: pink@else if $color-theme == orange $color-brand: #ff9900

.brand background-color: $color-brand

//scss syntax

$color-theme: orange;

@if $color-theme == pink {

$color-brand: pink;

} @else if $color-theme == orange {

$color-brand: #ff9900;

}

.brand { background-color: $color-brand }


Programmatic Logic (@for loop in sass) •

//sass syntax

@for $i from 1 through 5 .div_#{$i} color: red @for $i from 6 through 10 .div_#{$i} color: green

//scss syntax

@for $i from 1 through 5 { .div_#{$i} {

color: red; }}

@for $i from 6 through 10 { .div_#{$i} {

color: green; }}


Programmatic Logic (@each loop in sass) •

//sass syntax

$alist: ".odd" ".even"

@each $item in $alist @if $item == '.odd' #{$item} color: green @else #{$item} color: red

//scss syntax

$alist: ".odd" ".even" ;

@each $item in $alist { @if $item == '.odd' { #{$item} { color: green; } } @else { #{$item} { color: red; } }}


Programmatic Logic (@debug directive) •

//sass syntax

@function result($val)@debug $val@return $val * 2

.div width: result(10px)

//scss syntax

@function result($val) {@debug $val;@return $val * 2;

}

.div {width: result(10px);

}

how do you write sass

1. pick up a text editor (like atom or sublime… or anything you like)

2. choose syntax style you want to follow (sass or scss)

3. code your style rules and save the file as (.sass or .scss) like so.

4 .then comes the compilation…..

how to compile sass

• on cmd prompt type “sass <filename>.sass” the output will create new css file with “<filename>.css” (please follow step above to install sass on your mac or pc)

alternatively • on cmd prompt type “compass <filename>.scss”

the output will create new css file with “<filename>.css”

how to compile sass

• as a option you can use “compass watch” to continuously watch for file changes and compile them into css

So what next….

awesome you have learn about sass… next steps• learn more complex topics (using compass)• pick up a random css file re-code it into sass• read awesome blogs from frontend

developers who works on sass and coffeescript

• take same online course (if you can afford it)– www.codeschool.com– www.teamtreehouse.com (i like this

better)

Thank you

Lets go out there and write some sass…

Simple introduction Sass

Documents