SASS - is a meta-language which is based on CSS and is intended to increase the level of CSS code abstraction and Cascading Style Sheets files simplification.
SASS provides web developer with more options and offers more freedom while writing CSS. In fact, it resembles a programming language that's nested inside the CSS. You can use something that looks like the functions of the variables and have your code logically structured (structured styles and classes).
SASS is furnished with two syntaxes. The new basic syntax is known as "SCSS" (SassyCSS), enhanced syntax CSS3. This means that every current CSS3 style is also valid in SCSS . SCSS files have the extension ". scss".
The second one is an older syntax that's known as SASS. With its HAML concisenessit was intended for those who prefer brevity (cf. CSS). Instead of braces and semicolons padding is being used. SASS syntax is not fixed at the moment, but it's going to further be supported. Files with SASS syntax have the extension ". sass".
SASS vs SCSS | |
//SASS .content border: 1px solid red color: black .border padding: 10px margin: 10px | //SCSS .content { border: 1px solid red; color: black; } .border { padding: 10px; margin: 10px; } |
Personally, I do recommend using SCSS, because it seems to be more readable and digestible. the SCSS syntax appears to have the same exterior as CSS. But it's furnished with numerous useful features that have been added to make the coder's life way easier.