![Using SASS & Compass
ทุกครั้งก่อนเริ่มทํางาน ให้พิมพ์
compass watch [ชื่อโปรเจ็คที่สร้าง] เสมอ](https://image.slidesharecdn.com/begintosass-130801084319-phpapp01/85/Begin-to-sass-12-320.jpg)
Begin to sass
- 1. BEGIN TO SASS by Nicha
- 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;}
- 4. น่าเบื่อเนอะ
- 5. SASS&Compass SASS • CSS variables! • Mixins • หาบักง่าย • เขียน CSS ง่ายขึ้น สั้นขึ้น Compass • CSS Frameworks • มี libraries ให ้ • ใช ้คู่กับ SASS
- 6. Install SASS & Compass Download Ruby ก่อน ที่ http://rubyinstaller.org/downloads/
- 7. Install SASS 1.Run > CMD 2.พิมพ์gem install sass More info: Using SASS http://bit.ly/TZ2Gvv
- 8. Install Compass 1. พิมพ์gem install compass
- 9. Create Compass Project 1. Go to http://compass-style.org/install/ 2. ใส่ path ของโฟลเดอร์ที่เก็บ SASS File และค่าต่างๆ ตามภาพ
- 10. Create Compass Project 1. Copy text ในบรรทัดที่สองไปแปะใน CMD
- 11. SASS compile to CSS SASS File CSS file ที่มีชื่อเหมือนกัน compile เช่น style.scss จะถูกแปลงป็น style.css ให้
- 12. Using SASS & Compass ทุกครั้งก่อนเริ่มทํางาน ให้พิมพ์ compass watch [ชื่อโปรเจ็คที่สร้าง] เสมอ
- 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
- 14. Syntax 1. Sassy CSS (SCSS) 2. indented syntax (SASS)
- 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
- 20. 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 ชั้น เพื่อความไม่สับสน ***
- 21. Properties Nesting .funky { font: { family: fantasy; size: 30em; weight: bold; } } SCSS .funky { font-family: fantasy; font-size: 30em; font-weight: bold; } CSS
- 22. 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 ได ้ ด ้วยการใส่ & ไปข ้างหน้า
- 23. 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)