Sass (Syntactically Awesome Style Sheets)
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.
The main reason for this is the addition of features that CSS painfully lacks (like variables).
Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Sass has two syntaxes.
1. SCSS: The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
2. SASS: The second, the older syntax is known as the indented syntax (or just “Sass”). It’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
example.sass
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
example.scss
$color: red;
@mixin my-border($color) {
border: 1px solid $color;
}
body {
background: $color;
@include my-border(green);
}
Less
Less is also a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendible.
Its syntax differs from Sass and it is completely javascript based pre-processor whereas Sass has been developed in Ruby.
Compass
In short, Compass is a Sass extension and, like LESS Element of LESS, it has a bunch of ready-to-use CSS3 Mixins, except it has also added several other stuff that makes it a more powerful companion tool to Sass.
References
1. Introduction to SASS: http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass
3. Introduction of Compass & Getting started: http://www.hongkiat.com/blog/saas-compass/
0 comments: