Главная

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

2012-09-18 в 8:20, admin, рубрики: css, scss, web-разработка, адаптивная вёрстка, Веб-разработка, итераторы, Отзывчивый веб-дизайн, препроцессор, метки: scss, web-разработка, адаптивная вёрстка, итераторы, Отзывчивый веб-дизайн, препроцессор

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

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

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

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

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

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

Об основах SCSS уже писали faiwer¹ и AbleBoy², здесь же я хочу описать пару техник, которые мне действительно помогли.

Итераторы

В 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) ³

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

¹ — «SCSS — немного практики, часть I»
² — «Заметка ленивого верстальщика о SCSS и Compass Framework»
³ — Крис Эпштайн, Github:gist, 1215856

Автор: M1nstrel