Contents

Install ruby..................................................................................................................... 1
Install Koala................................................................................................................... 1
SASS l g?.................................................................................................................... 1
Quy tc xp chng (Nested Rules)........................................................................................ 2
S dng bin (Varibles) $tn-bin...................................................................................... 2
Quy tc Mixin @mixin tn_mix........................................................................................ 3
Extends K tha @extend tn_class................................................................................... 4
Vng chn %name........................................................................................................... 5
@import........................................................................................................................ 5
iu kin IF................................................................................................................... 5

Install ruby
SASS l mt ng dng vit bng Ruby nn nu bn quen vi vic dng lnh, th c th ci t
SASS v s dng cc lnh ca n. serie ny mnh khng ni qua vic ny.
Install Koala
Nu bn l ngi mi, c bit l ang dng Windows th hy s dng cc phn mm bin dch
SASS nh Compass, Koala, Prepros. bi ny mnh s s dng Koala (min ph).

SASS l g?
SASS l mt CSS Prepocessor (nh LESS) gip bn vit CSS nhanh hn v c cu trc r rng
hn. Vi SASS, bn c th vit CSS theo th t r rng, qun l cc bin c nh ngha
sn, c th t ng nn tp tin CSS li bn tit kim dung lng.

Li ch ca SASS mnh kh m c th ni ht ra y c, nhng mnh hy vng bn s hiu rng

SASS th v nh th no sau khi lm quen vi n.

Quy tc xp chng (Nested Rules)

S dng bin (Varibles) $tn-bin

Gi y vit CSS chng ta c th c s dng bin vi SASS ri nh . Bin l cch m chng
ta c th khai bo mt gi tr no m chng ta xc nh c s dng n nhiu ln, chng
hn nh cc m mu, gi tr border, shadows,.

 khai bo mt bin, chng ta s vit du $ ng trc tn bin nh th ny.

$primary_shadow: 5px 5px 5px #000000;
Sau chng ta s s dng bin trong code bng cch vit nh sau, chng hn nh mnh ly gi
tr ca bin $primary_shadow b vo th text-shadow nh.
h1.post_title {text-shadow: $primary_shadow}
D nhin, sau ny bn c gp bt c gp bt k ci g m mun cho n thuc tnh text-shadow
ging nh ci m bn nh sn th ch cn chn text-shadow: $primary_shadow vo .

Quy tc Mixin @mixin tn_mix

Mixin l mt c ch kh ph bin trong SASS m nu bn bit cch p dng th s rt c li khi
vit CSS. Cng dng ca n l mang nhiu thuc tnh m bn quy c trong mt mix no
b vo mt thnh phn bt k m khng cn phi vit li cc thuc tnh . V d, thng khi s
dng thuc tnh float trong CSS th chng ta phi khai bo lun margin nh th ny
.class_1 {
float: left;
margin: 0px 10px;
}

By gi bn c qu nhiu thnh phn m cn float trong HTML th vit li 2 dng kia hoi cng
chn. By gi nhanh, chng ta s s dng c ch mixin trong SASS gii quyt n. Trc
ht, mnh s to mt mixin tn l float-left nh sau.
@mixin float-left {
float: left;
margin: 0px 10px;
}

Sau , mnh mun cho mt thnh phn no c thuc tnh float: left v margin nh th kia th
ch cn vit nh sau. (@include tn_mixin)
.class { @include float-left;}
Nhng by gi, bn khng mun s dng float: left m l float:right th sao? Khng l li to
thm mt mixin na sao? Khng cn, chng ta c th t thm tham s cho ci mixin kia
chng ta c th thay i n ty vo thi im. Mnh xin sa li code mixin nh sau

V khi i include, chng ta s vit nh sau

@mixin float-left($float,$margin) {
float: $float;
margin: $margin;
}
.class_1 {
@include float-left(right,5px 10px);
}

Extends K tha @extend tn_class

y l mt tnh nng quan trng m bn cn hiu cng sm cng tt v sau ny bn s dng rt
nhiu, nht l trong khi lm vic vi mt CSS Framework. Tnh nng k tha ny ngha l bn
ch nh cho mt thnh phn no tha hng tt c cc thuc tnh ca mt class (hoc vng
chn no ) bt k m bn khai bo sn.
V d by gi mnh c code to button di long ngong nh sau.
.button_1 {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;

display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.button_2 { @extend .button_1; }

Vng chn %name

%name_name {
color: #red;
margin: 5px 10px;
}
.code_name_name { @extend %name_name; }

@import
Trong Sass @import gip bn t chc cu trc cc tp tin CSS c tt hn.

iu kin IF, For, While, Each

Sass cung cp cho bn iu khin logic sau:

@if
@for
@each
while
Mun lm vic vi cc iu khin trong Sass th bn nn c cht kin thc lp trnh c bn nn
mnh s dnh ring mt bi vit hng dn chi tit hn.