�ݺ�ߣ

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

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
�C Indentation syntax with file ext .sass
�C 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 Window
download 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
//Null
example null
//list
example
$awesome-list: ��.bar�� .foo��
��.odd��
//maps or hash
example
$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
body
max-width: 1200px
margin: 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
.addition
width: 20% + 50%
.sub
height: 20px - 10px
.division
top: (500/2)
.mul
width: 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)
�C www.codeschool.com
�C www.teamtreehouse.com (i like this
better)

Lets go out there and write some sass��

�ݺ�ߣ

Simple introduction Sass

Recommended

More Related Content

What's hot (20)

Similar to Simple introduction Sass (20)

Simple introduction Sass