SCSS: a couple of useful techniques
CSS preprocessors are increasingly popular among web developers. Why?
Because they allow:
Currently, the most popular preprocessors are SASS and LESS.
You can read about why SASS is better than LESS in this article . Is it better - a moot point, however, I switched from LESS to SCSS if only because there is:
You can read about comparing SCSS and SASS syntax in this article . Personally, I chose SCSS because of the backward compatibility with CSS and, as a result, the ability to quickly include old CSS files in the project using the import directive . To do this, they need to change the extension to .scss . Faiwer 1 and AbleBoy 2
already wrote about the basics of SCSS, but here I want to describe a couple of techniques that really helped me.
SCSS has loops , and that’s great!
Suppose we have a site color palette, and we want to colorize the menu in all its colors.
index.html :
style.scss :
There is no increment in SCSS (except that in for , but we need an analog of foreach ), so this trick is required. But at the same time, we get a full-fledged iterator to go through the $ colors list!
Such compact code transforms into such CSS - code :
style.css
With this technique, you can compact and convenient to write media-queries to "adaptive" layout (responsive layout).
style.scss
In CSS, this will not look so compact, especially considering the repeated use of this mixin'a:
style.css
More details about mixins in SCSS and SASS are written by Chris Eppstein 3
And how do you make life more convenient with SCSS?
1 - “SCSS - a bit of practice, part I”
2 - “Note of a lazy layout designer about SCSS and the Compass Framework”
3 - Chris Epstein, Github: gist, 1215856
UPD: The problem with a lot of media queries can be solved with this jam.
Because they allow:
- Save time
- Apply DRY principle in CSS
- Make code more readable.
Currently, the most popular preprocessors are SASS and LESS.
You can read about why SASS is better than LESS in this article . Is it better - a moot point, however, I switched from LESS to SCSS if only because there is:
- Cycles
- Conditional statements
- Lists
You can read about comparing SCSS and SASS syntax in this article . Personally, I chose SCSS because of the backward compatibility with CSS and, as a result, the ability to quickly include old CSS files in the project using the import directive . To do this, they need to change the extension to .scss . Faiwer 1 and AbleBoy 2
already wrote about the basics of SCSS, but here I want to describe a couple of techniques that really helped me.
Iterators
SCSS has loops , and that’s great!
Suppose we have a site color palette, and we want to colorize the menu in all its colors.
index.html :
Наша техника
style.scss :
$colors: #f74a3a #fcbe26 #8cc687 #4da5f2 #b01395;
$i:0;
.menu-main ul li {
@each $col in red, orange, green, blue, purple {
$i: $i + 1;
&.#{$col} {
background: nth($colors, $i);
}
}
}
There is no increment in SCSS (except that in for , but we need an analog of foreach ), so this trick is required. But at the same time, we get a full-fledged iterator to go through the $ colors list!
Such compact code transforms into such CSS - code :
style.css
.menu-main ul li.red {
background: #f74a3a;
}
.menu-main ul li.orange {
background: #fcbe26;
}
.menu-main ul li.green {
background: #8cc687;
}
.menu-main ul li.blue {
background: #4da5f2;
}
.menu-main ul li.purple {
background: #b01395;
}
Respond-to
With this technique, you can compact and convenient to write media-queries to "adaptive" layout (responsive layout).
style.scss
// Создаем mixin
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: 479px) { @content; }
}
@else if $media == wide-handhelds {
@media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
}
@else if $media == tablets {
@media only screen and (min-width: 768px) and (max-width: 959px) { @content; }
}
}
.menu-main {
float: left;
width: 300px;
// Для телефонов
@include respond-to(handhelds) { float: none; };
// Для телефонов с широким экраном
@include respond-to(wide-handhelds) { float: none; };
// Для планшетов
@include respond-to(tablets) { width: 240px; };
}
In CSS, this will not look so compact, especially considering the repeated use of this mixin'a:
style.css
.menu-main {
float: left;
width: 300px;
}
@media only screen and (max-width: 479px) {
.menu-main {
float: none;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.menu-main {
float: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.menu-main {
width: 240px;
}
}
More details about mixins in SCSS and SASS are written by Chris Eppstein 3
And how do you make life more convenient with SCSS?
1 - “SCSS - a bit of practice, part I”
2 - “Note of a lazy layout designer about SCSS and the Compass Framework”
3 - Chris Epstein, Github: gist, 1215856
UPD: The problem with a lot of media queries can be solved with this jam.