'Difference between compass and sass?
What is the difference between SASS and Compass, SASS and SCSS? I'm getting really confused by this.
Solution 1:[1]
At the risk of oversimplification, Compass is a framework while Sass is a language abstraction. You write Sass code (and compile it to standard CSS) within the Compass context. SCSS is simply the most recent syntax of the Sass language. It was created for the sole purpose of being more CSS-like in its syntax, as far as I can tell. All the syntactic sugar of Sass, but more familiar to front end developers comfortable with CSS.
Solution 2:[2]
In general: "Sass" is the name for a css preprocessor - means: a helpful tool for developers to write short forms of placeholders that are automatically compiled to normal css code. Sass has two different ways of writing short form code: SCSS and SASS. The difference between SCSS and SASS is very simple: SCSS is normal CSS with additional functions. Every CSS file can be renamed as .scss and will validate. SASS uses a shorter form of writing by skipping all curly brackets. To convert a .css file to a valid .sass file, you need to change the css code.
Compass is a so called css framework that is controlled via command line tools. Compass supports the development by giving predefined functions, mixins and so on to speed up coding and prevent writing mistakes. for example compass allows you to call a box-shadow with all polyfills just by writing "@include box-shadow();". all css-code is added by compass itself when compiling the file by the use of "compass compile". Compass is one of the most used tools for working in bigger frontend development projects.
Solution 3:[3]
I've provided a TLDR answer:
Compass is essentially a SASS library. It uses the raw language of sass and creates common reusable functions.
From the website:
Compass uses Sass.
Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
Solution 4:[4]
Compass is a framework built with Sass. Another popular Sass frameworks are Bourbon and Susy. That means, all these frameworks are written in Sass. They just have predefined functions and mixins you can use to speed up your workflow.
SCSS (Sassy Sass) is just the newer syntax of Sass. It uses CSS-syntax. For instance:
h2 {
color: red;
}
On the other hand, Sass uses a less "strict" syntax:
h2
color: red
Notice, that no braces and no semi-colons are used. Also, you have to use indentation.
To sum up, what framework or which Sass syntax you'll use, it's your choice!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Kenny Linsky |
| Solution 2 | RedSight |
| Solution 3 | chrisjlee |
| Solution 4 |