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 conciseness it 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.
SASS features
- Variables
- Nesting
- Mixins
- Selector Inheritance
Variables
Still applying the same color everywhere? Need some calculations of the height and width or text size to be done? SASS supports both variables, and the basic mathematical operations as well as many useful functions (more here).
$color = #000;
$spacing = 10px;
.content {
border: 1px solid red;
color: $color;
}
.border {
padding: $spacing;
margin: $spacing;
}Nesting
SASS is capable of skipping the repetition via nesting selectors into one another. Same thing does work with properties.
.content {
margin: 2em 0;
p {
text-align: right;
font-size: 14px;
}
}
body{
color: $color
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}Mixing
Mixing facilitate reuse of the whole pieces of CSS as well as of their selectors and properties, hence they are still more rewarding than the variables. You can even specify the arguments.
To put it roughly, mixing are the CSS "feature".
@mixin table {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table;
}Selector Inheritance
Sass can inherit styles that have been applied to a serial one selector without duplication of CSS properties.
.error {
border: 1px #f00;
background: #fdd;
}
.warning {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}Compiling SASS to CSS
Just in case, you have files (SCSS or SASS) in which you write on Sass. Browsers can't read this kind of syntax. Browsers can only 'understand' CSS and, therefore, we need to convey our styles as being formatted in CSS. For this, we have to have our sass / scss files compiled. Make sure you are using a relevant framework, in which case Compass will do nicely for you.
Compass settings require a Ruby, therefore, if you have not yet installed it on your computer, just refer to this install.
The installation and usage Compass
To install the Compass, follow the following command in the console:
1) gem update — system
2) gem install compass
When the Compass has been set, you need to create a compass-project:
compass create <path-to-project>
Compass SCSS is into creating files in which you can write your styles and add your own. SCSS files. To have the compiler launched, the compass watch command is activated. Compass has lots of great opportunities. For more detailed info on all Compass possibilities plus the examples refer to their official website Compass.