Блог

29.02.2012

Zemelia

SASS (Syntactically Awesome StyleSheets)

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

SASS предоставляет больше возможностей и свободы при написании CSS для создания сайтов. Это как программная речь внутри CSS. Вы можете использовать что-то вроде функций с переменными, логически структурировать ваш код (структурированность стилей и классов).

SASS имеет два синтаксиса. Новый основной синтаксис известен как "SCSS" (SassyCSS), расширенный синтаксис CSS3. Это означает, что каждый действующий стиль CSS3 валидный также и в SCSS . SCSS файлы имеют расширение ". scss".

Второй, более старый синтаксис, известен как SASS. Вдохновленный краткостью HAML, он наилучшим образом подходит тем, кто предпочитает лаконичность CSS. Вместо фигурных скобок и точек с запятой используются отступы. SASS синтаксис уже не является основным на данный момент, но он будет поддерживаться и в дальнейшем. Файлы с SASS синтаксисом используют расширение ". sass".

SASS vs SCSS
//SASS .content border: 1px solid red color: black .border padding: 10px margin: 10px	//SCSS .content { border: 1px solid red; color: black; } .border { padding: 10px; margin: 10px; }

Лично я рекомендую использовать SCSS синтаксис, поскольку он более читабелен и понятен. Как видно, синтаксис SCSS ничем не отличается от синтаксиса CSS. Но при этом он имеет массу полезных возможностей, могущих упростить жизнь верстальщику.

Возможности SASS

Variables (Переменные)
Nesting (Вложенность)
Mixins (Миксины)
Selector Inheritance (Наследование правил селекторов)

Variables (Переменные)

Всюду используете один цвет? Вам необходимо сделать некоторые расчеты высоты, ширины или размера текста? SASS поддерживает переменные, а также основные математические операции, также множество полезных функций (подробнее здесь).

$color = #000;
$spacing = 10px;
.content {
  border: 1px solid red;
  color: $color;
}
.border {
  padding: $spacing;
  margin: $spacing;
}

Nesting (Вложенность)

SASS в состоянии избегать повторения селекторов путем вложения их друг в друга. Так же работает со свойствами.

.content {
  margin: 2em 0;
  p {
    text-align: right;
    font-size: 14px;
  }
}
 
body{
  color: $color
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Mixins (миксины)

Миксины позволяют повторно использовать целые куски CSS, их селекторы и свойства, что еще более полезно, чем переменные. Вы даже можете задать аргументы. Грубо говоря, миксины - это CSS "функции".

@mixin table {
  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;
}

Selector Inheritance (Наследование правил селекторов)

Sass может наследовать стили, примененные к определенному селектору, без дублирования CSS свойств.

.error {
  border: 1px #f00;
  background: #fdd;
}
 
.warning {
  font-size: 1.3em;
  font-weight: bold;
}
 
.badError {
  @extend .error;
  border-width: 3px;
}

Компиляция SASS в CSS

Если у вас есть файлы (SCSS или SASS), в которых вы пишете на Sass. Браузеры не понимают такой синтаксис. Браузеры понимают только CSS, следовательно, нам нужно передать наши стили в формате CSS. Для этого наши sass / scss нужно скомпилировать. В таком случае вам понадобится специальный фреймворк, и вот с этим то отлично справляется Compass.

Установка Compass'а предполагает наличие Ruby, если она не установлена, необходимо установить.

Установка и использование Compass

Для установки Compass используем следующие команды в консоли:

1) gem update - system
2) gem install compass

Когда compass установлено, надо будет создать compass-проект:
compass create
Compass создаст scss файлы, в которых можно будет писать наши стили и добавлять свои. css файлы.
Для запуска компилятора используем команду compass watch. Возможностей у Compass'а масса. Более подробно (с примерами практического использования о всех его возможностях и можно прочитать на официальном сайте Compass.

compass