SCSS - a new portion of glaze from Sass

Lately, I practically didn’t do any layout, and I missed the output of Sass3, in which the SCSS extension ( S assy CSS ) is implemented. This is exactly an extension for CSS without syntax “distortion” - that is, any valid CSS document is also a fully valid SCSS document. In the post I will compare with existing preprocessors such as Sass and Less . About which it was already written on Habré: Sass , Less . But that information is a bit outdated: in particular, the Sass syntax has changed.

Introduction

The very first of the preprocessors was created by Sass, many frightened by their syntax, at least by the fact that the rules were indicated with colons at the beginning. It was a kind of tribute to the Symdol type in Ruby, but the CSS code is not written by Ruby programmers. Therefore, a group of enthusiasts created Less, Sass capabilities (Permen, Mixins, Inheritance, Arithmetic) + native syntax. Later, the Sass team changed the syntax and created the SCSS. Like Less, it was a language with CSS syntax and Sass capabilities.
')
Below is a list of features and their implementation on each of the preprocessors.

Variables

Sass

$blue: #3bbfce
$margin: 16px
.border
padding : $margin / 2
margin : $margin / 2
border-color : $blue


Less

@brand_color: #4D926F ;
#header {
color : @brand_color;
}


SCSS

$blue: #3bbfce ;
$margin: 16px ;
.border {
padding : $margin / 2 ;
margin : $margin / 2 ;
border-color : $blue;
}

From the code, in principle, it is clear how you can use variables. From myself I just note that they are really convenient to use for assigning colors. When the project decides to change some color, it will not be difficult for you to change the value of one variable.

Inheritance

CSS

table .hl {
margin : 2em 0 ;
}
table .hl td .ln {
text-align : right ;
}


Less / SCSS

table .hl {
margin : 2em 0 ;
td .ln {
text-align : right ;
}
}


Sass

table .hl
margin : 2em 0
td .ln
text-align : right

In my opinion, inheritance is great.

Mixins

CSS

Mixing in CSS is just creating a class that will be assigned to several HTML elements.
Example with clearfix:

.clearfix:after {
content : "." ;
display : block ;
clear : both ;
visibility : hidden ;
line-height : 0 ;
height : 0 ;
}
.clearfix {
display : inline-block ;
}
html[xmlns] .clearfix {
display : block ;
}
* html .clearfix {
height : 1% ;
}

<div class = "clearfix" >


Less

.rounded_corners ( @radius : 5px ) {
-moz-border-radius : @radius ;
-webkit-border-radius : @radius ;
border-radius : @radius ;
}
#header {
.rounded_corner ;
}
#footer {
.rounded_corners ( 10px );
}


SCSS

@mixin rounded_corners ( $radius ) {
-moz-border-radius : $radius ;
-webkit-border-radius : $radius ;
border-radius : $radius ;
}
#footer {
@include rounded_corners ( 10px );
}

Sass

@mixin rounded_corners ( $radius )
-moz-border-radius : $radius
-webkit-border-radius : $radius
border-radius : $radius
#footer
@include rounded_corners ( 10px )


As we see in mixin, you can pass a parameter, which sometimes can be very useful.

Arithmetic

Less

@the-border: 1px ;
#header {
border-left : @the-border;
border-right : @the-border * 2 ;
}

SCSS

$the-border: 1px ;
#header {
border-left : $the-border;
border-right : $the-border * 2 ;
}

Sass

$the-border: 1px
#header
border-left : $the-border
border-right : $the-border * 2


This is the most primitive example. I think you already have several options where this can be applied.

Conclusion

As we can see in the Less, SCSS syntax is similar to the CSS syntax, and in these preprocessors additional buns are only unobtrusively provided, but in slightly different ways. For example, variables and mixins are declared in different ways. In turn, Sass and Less are mutually mutually syntactic only in Sass, selector rule blocks are formed by indents, not quotes, and there are no semicolons at the end of lines. I think this is a great replacement, it allows you to save on the line on each block.

Preprocessors are distributed as Ruby jams.

SCSS, Sass
gem install haml

Less
gem install less