Sass and Compass short presentation
?Download as PPTX, PDF?
1 like?280 views
Sass is an extension of CSS that adds powerful features like variables, nested rules, mixins and imports. It has two syntax options, SCSS and Sass, that allow for flexible code organization. The Compass framework provides pre-built mixins and functions to streamline styling tasks when used with Sass.
Convert to study guideBETA
Transform any presentation into a summarized study guide, highlighting the most important points and key insights.
Sass and Compass short presentation
- 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 ¨C 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)
- 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