BEGIN TO SASSby Nicha

เหนอยไหม?

กบการเขยน CSS แบบเดมๆ

ul{ list-style: none;}ul li{ padding: 10px 5px; }ul li span{ color: red; font-size: 12px;}

ul li a{ color: black;}ul li a:hover{ color: gray;}ul li a:active{ color: blue;}

นาเบอเนอะ

SASS & Compass

SASS• CSS variables!• Mixins• หาบกงาย • เขยน CSS งายขน สนขน

Compass• CSS Frameworks• ม libraries ให • ใชคกบ SASS

Install SASS & Compass

Download Ruby กอน ท

http://rubyinstaller.org/downloads/

Install SASS

1.Run > CMD

2.พมพ gem install sass

More info: Using SASS http://bit.ly/TZ2Gvv

Install Compass

1. พมพ gem install compass

Create Compass Project1. Go to http://compass-style.org/install/

2. ใส path ของโฟลเดอรทเกบ SASS File และคาตางๆ ตามภาพ

Create Compass Project

1. Copy text ในบรรทดทสองไปแปะใน CMD

SASS compile to CSS

SASSFile

CSS fileทมชอเหมอนกน

compile

เชน style.scss จะถกแปลงปน style.css ให

Using SASS & Compass

ทกครงกอนเรมทางาน ใหพมพ

compass watch [ชอโปรเจคทสราง] เสมอ

SASS Features• Fully CSS3-compatible• Language extensions such as variables, nesting, and

mixins• Many useful function for manipulating colors and other

values• Advanced features like control directives for libraries• Well-formatted, customizable output• Firebug Intregration (add ons)

More info: • Sass useful functions : http://bit.ly/SLqe3o• Sass control directives: http://bit.ly/RWKFeQ• Firefox Add ons : http://bit.ly/QctKZ4

Syntax

1. Sassy CSS (SCSS)2. indented syntax (SASS)

SCSS Syntax

•Similar to CSS•An extension of the syntax of CSS3•Understand most of CSS hacks and vendor-specific syntax

•*.scss format

More info: http://bit.ly/SLpk7b

SASS Syntax

•Indented syntax (like python)• Use indentation rather than brackets to indicate nesting of selectors

• Use newlines rather than semicolons to separate properties

•Easier to read and Faster to write•*.sass format

More info: http://bit.ly/SLpk7b

Converting SASS and SCSS

สามารถแปลงไฟล .scss เปน .sass ไดงายๆ โดยพมพ

คาสงใน command line

# Convert Sass to SCSS sass-convert style.sass style.scss

# Convert SCSS to Sass sass-convert style.scss style.sass

Writing SCSS• Comments• Nesting• Properties Nesting• Parent Reference Selectors• Variable• Interpolation• Operations and Functions• Mixin

• Mixin with argument• Mixin control (if, else if, for, while)

• @import

Comments

/* This comment is * several lines long. * since it uses the CSS

comment syntax, * it will appear in the CSS

output. */

body { color: black; }

// These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax.

a { color: green; }

SCSS/* This comment is* several lines long.* since it uses the CSS

comment syntax,* it will appear in the CSS

output. */

body {color: black;

}a {

color: green; }

CSS

Nesting

#main p { color: #0f0; width: 97%; .redbox { background-color: #f00; color: #000;

}}

SCSS#main p { color: #0f0; width: 97%;

}#main p .redbox { background-color: #f00; color: #000;

}

CSS

*** ไมควร Nested เกน 3 ชน เพอความไมสบสน ***

Properties Nesting

.funky { font: { family: fantasy; size: 30em; weight: bold;

} }

SCSS.funky {font-family: fantasy;font-size: 30em;font-weight: bold;

}

CSS

Parent Reference Selectors

#main { color: black; a { font-weight: bold;&:hover { color: red;

} }

}

SCSS#main { color: black;

}#main a { font-weight: bold;

}#main a:hover { color: red;

}

CSS

เราสามารถ Reference ตว parent selectors ได ดวยการใส & ไปขางหนา

Variable

$main-color: #ce4dd6;$style: solid;

#navbar {border-bottom: {

color: $main-color;style: $style;

}}a {

color: $main-color;}

SCSS#navbar {

border-bottom-color: #ce4dd6;

border-bottom-style: solid; }

a {color: #ce4dd6;

}

CSSเราประกาศตวแปรดวย $ (เหมอน php)