SASS - CSS на стероидах

В последней своей работе я решил отказаться от самостоятельной разработки темы для Drupal 7 и попробовать взять за основу что-то готовое. Из обязательных условий было использование HTML5 и гибкая работа с различными типами устройств. Погуглив я наткнулся на разработку Adaptive Themes и начал вникать в детали. Стоит отметить что речь в статье пойдет о технологии SASS, используемой в этой теме.
Раньше я только читал о фреймворках для CSS упрощающих жизнь разработчика, так как LESS и SASS. Пришло время попробовать в действии один из них.

Чтоже такое SASS и чем он так хорош? Не буду вдаваться в расшифровку абревиатур, в общем SASS - это фреймворк, который придает гибкость обычному CSS, добавляя в его инструментарий возможность использовать переменные, псевдоклассы и позволяет гибко структурировать ваш код. Стоит отметить что SASS имеет два варианта синтаксического оформления на выбор.

Первый вариант SCSS (for “Sassy CSS”) - это синтаксис расширяющий CSS3, то есть все правила CSS3 будут работать и в SCSS. Второй - более старый формат - SASS, он исключает использование фигурных скобок и точки с запятой, тем самым упрощая синтаксис CSS. Какой удобней для вас - решать вам. В теме от Adaptive Themes за меня решили, выбрав SCSS, но должен заметить, этот синтаксис мне больше по душе.

Чтобы понять как это работает лучше всего посмотреть примеры.

Вложенность

// SCSS

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

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}
/* CSS */

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

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

В SCSS не нужно повторять селекторы для того чтобы добраться до конкретного элемента. Достаточно записать класс в рамках элемента-контейнера. Это как упрощает написание кода, так и улучшает восприятие структуры и исключает досадные ошибки, когда наш класс может примениться к группе элементов, для которых этого не предусматривалось. Так же, как можно увидеть из примера, вложенность доступна и для свойств.

Использование переменных

То, о чем пожалуй задумывалось 90% программистов, которым приходилось заниматься верской страниц. И вот теперь это становится возможным! Оформляйте переменные и используйте везде где это необходимо.

// SCSS

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
/* CSS */

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Примеси

Очень похожие на функции куски кода, в которые можно оформлять свойства и селекторы для дальнейшего подмешивания их к нужным элементам или их группам. В примеси даже можно передавать аргументы, как в настоящие функции.

// SCSS

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}
/* CSS */

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Расширенные селекторы

С помощью свойства @extend можно унаследовать для вызывающего элемента все свойства вызванного селектора при этом избежав дублирования кода.

// SCSS

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}
/* CSS */

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Как работает SASS

Все это здорово, конечно. Но как заставить броузеры понимать SASS, если они с таким трудом идут к CSS3? На самом деле броузер не надо ничему учить, достаточно иметь компилятор, который будет файлы в формате SASS переделывать в знакомый каждому броузеру CSS, вот и все. Для этого есть несколько путей, о которых можно почитать на сайте разработчика. Лично для себя я выбрал Compass, он болтается в качестве демона и на лету компилирует измененные SCSS файлы в CSS, так что я даже этого не замечаю.

Если подвести итог, то SASS развязывает руки. Теперь можно строить деревья, определять перменные, наследовать куски кода. Да от этого CSS не становится динамическим, но на мой взгляд сильно облегчается задача написания стилевых таблиц разметки.

Комментарии