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)
Top Related