- PVSM.RU - https://www.pvsm.ru -

SCSS: пара полезных техник

CSS – препроцессоры все популярнее среди веб – разработчиков. Почему?
Потому что они позволяют:

  • Сэкономить время
  • Применять принцип DRY [1] в CSS
  • Сделать код более читаемым

На данный момент наиболее популярными препроцессорами являются SASS и LESS.

О том, почему SASS лучше LESS, можно почитать в этой статье [2]. Лучше ли — вопрос спорный, однако, я перешел с LESS на SCSS хотя бы потому, что тут есть:

  • Циклы
  • Условные операторы
  • Списки

О сравнении синтаксиса этой статье [3]. Лично я выбрал SCSS по причине обратной совместимости с CSS и, как следствие, возможности быстро включать старые CSS файлы в проект посредством директивы import.

Об основах SCSS уже писали faiwer [4]1 [5] и AbleBoy [6]2 [7], здесь же я хочу описать пару техник, которые мне действительно помогли.

Итераторы

В SCSS есть циклы, и это замечательно!
Предположим, у нас есть цветовая палитра сайта, и мы хотим раскрасить меню во все ее цвета.

index.html:

<!DOCTYPE html>
<html>
<head>
	<title>Наша техника</title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<nav class="menu-main">
		<ul>
			<li class="red"><a href="#">Автомобили</a></li>
			<li class="orange"><a href="#">Тракторы</a></li>
			<li class="green"><a href="#">Грузовики</a></li>
			<li class="blue"><a href="#">Паровозы</a></li>
			<li class="purple"><a href="#">Теплоходы</a></li>
		</ul>
	</nav>
</body>
</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);
		}
	}
}

Инкремента в SCSS нет (кроме того, что в for, а нам надо аналог foreach), так что требуется вот такой трюк. Но при этом мы получаем полноценный итератор для прохода по списку $colors!
Такой компактный код трансформируется в такой CSS ­- код:

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

С помощью этой техники можно компактно и удобно писать media-запросы для «адаптивной» верстки (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; };
}

В CSS это будет выглядеть не столь компактно, особенно с учетом повторных применений этого 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;
  }
}

Подробнее о mixin'ах в SCSS и SASS пишет Крис Эпштайн (Chris Eppstein) 3 [8]

А как вы делаете жизнь удобнее посредством SCSS?

1 — «SCSS — немного практики, часть I» [5]
2 — «Заметка ленивого верстальщика о SCSS и Compass Framework» [7]
3 — Крис Эпштайн, Github:gist, 1215856 [9]

Автор: M1nstrel

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/web-razrabotka/15328

Ссылки в тексте:

[1] DRY: http://en.wikipedia.org/wiki/Don%27t_repeat_yourself

[2] этой статье: http://css-tricks.com/sass-vs-less/

[3] этой статье: http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better

[4] faiwer: http://habrahabr.ru/users/faiwer/

[5] 1: http://habrahabr.ru/post/140612/

[6] AbleBoy: http://habrahabr.ru/users/ableboy/

[7] 2: http://habrahabr.ru/post/111523/

[8] 3: #link3

[9] Крис Эпштайн, Github:gist, 1215856: https://gist.github.com/1215856/