SCSS: a couple of useful techniques

CSS preprocessors are increasingly popular among web developers. Why?
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.

Also popular now: