3. 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;}
13. 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
15. 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
16. 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
17. 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
18. 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
19. 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