Sass and Compass short presentation

50 %
50 %
Information about Sass and Compass short presentation

Published on February 28, 2014

Author: pelllu



o scurta prezentare despre Sass


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.

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

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

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

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

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)

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




Css generat


Css generat


Css generat


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


#main presentations

Add a comment

Related presentations

Related pages

GitHub - likedaang/sass-compass: Short presentation on ... Sass & Compass Slide Presentation. A short and simple presentation highlighting installation and use of Sass & Compass in a web design workflow.
Read more

CSS Preprocessors Compared: Sass vs. LESS - Hongkiat

... in short, Compass is an ... I think we have to agree Sass and Compass is a ... The LESS documentation presentation is better, although Sass has ...
Read more

Compass: Bringing direction to your Sass - Prezi

A look at some of the best features of Compass Framework ... People invited to a presentation do not need a Prezi ... Compass: Bringing direction to your Sass.
Read more

godcore (Max) · GitHub

Popular repositories angular-doc 0 sass-compass 0 Short presentation on Sass & Compass in web design workflow; angularjs-modal-service 0 ...
Read more

#88: Intro to Compass/Sass | CSS-Tricks

#88: Intro to Compass/Sass. ... @benjamin Anthony Short ... (an interactive presentation on a multimedia device) ...
Read more

Less vs Sass? It’s time to swtich to Sass | Zing Design

Less vs Sass? It’s time to switch to Sass. ... Less for a short ... but then switched to Sass + Compass. Sass is awesome with all of it’s many ...
Read more

Why Sass? · An A List Apart Article

... ( CSS stops short of ... They wanted CSS to be powerful enough to style web pages and separate content from presentation, ...
Read more

Compass Presentation - Documents

Share Compass Presentation. Embed size(px) start on. Link. Compass Presentation. by tools2succeed. on Jun 10, 2015. Report Category: Documents. Download: 0 ...
Read more