o scurta prezentare despre Sass

1. SASS
&
COMPASS

2. Sass (Syntactically Awesome
StyleSheets)
• Sass is an extension of CSS that adds power
and elegance to the basic language. It allows
you to use variables, nested
rules, mixins, inline imports, and more, all
with a fully CSS-compatible syntax. Sass helps
keep large stylesheets well-organized, and get
small stylesheets up and running quickly,
particularly with the help of Compass library.

3. •
•
•
•
•
•
•
•
•
•
SASS
Compatibil CSS3
Variabile
Nesting
Mixins
Import
Mostenire
Functii
Functii de control
Output bine formatat
Integrare cu firebug

4. Syntax
• *scss (Sassy CSS) - este o extensie la fisierele de
tip *css, asta insemnand ca orice fisier css valid
este si un *scss valid.
• *sass – este o alta extensie folosita, foloseste
indentarea pentru gruparea selectorilor, nu are
nevoie de “{” sau “;” fiind mai usor de scris si
inteles decat *css.
Sass are chiar si un “tool” de convertire a
acestora in ambele sensuri:
$ sass-convert style.scss style.sass

5. *scss
•
•
•
•
•
•
•
•
•
•
•
#two-column {
@include column-count(2);
width: 300px;
margin-bottom: 20px;
}
#three-column {
@include column-count(3);
width: 300px;
margin-bottom: 20px;
}

6. *sass
#two-column
+column-count(2)
width: 300px
margin-bottom: 20px
#three-column
+column-count(3)
width: 300px
margin-bottom: 20px

7. Variabile
•
•
•
•
•
•
Numere (1,2,3, 20px)
String (“foo”, ‘bar’, baz)
Culori (blue,#FFFFFF, RGBA)
Boolean (true, false)
Null
Lista de valori separate cu virgula sau spatiu
(1.2em 1em 0 5em, Helvetica, Arial, sans-serif)

8. Variabile
$width: 5em;
#main
{
width: $width;
}

9. Grupare

10. Mixins

12. Import

13. Css generat

14. Mostenire

15. Css generat

16. Operatori

17. Css generat

18. Functii

19. Compass
• Framework pentru Sass
• Foarte multe librarii ce pot fi incluse
• Mixin-uri care sunt deja facute (rounded
corners, box-shadow…)

20. exempleeeeeeee