Препроцессоры

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

Такие разные задачи, как правило, небольшие, чуть-чуть снижают эффективность. К счастью, эти и несколько других неэффективных задач были признаны и вызов им бросили препроцессоры.

Препроцессор — это программа, которая берёт один тип данных и преобразует его в другой тип данных. В случае HTML и CSS, одни из наиболее популярных языков препроцессора — это Haml и Sass. Haml преобразуется в HTML, а Sass преобразуется в CSS.

После своего становления, при решении некоторых наиболее распространённых проблем, Haml и Sass нашли много дополнительных способов для расширения возможностей HTML и CSS. Не только путём удаления неэффективных задач, но также созданием методов, делающих разработку сайтов проще и логичнее. Популярность препроцессорам также принесли различные фреймворки, которые их поддерживают; одним из наиболее популярных является Compass.

Haml

Haml (HTML abstraction markup language, абстрактный язык разметки HTML) — это язык разметки с единственной целью — предоставить возможность писать красивую разметку. Являясь собственным языком разметки, код, написанный на Haml, позже преобразуется в HTML. Haml продвигает принцип «не повторяйся» и способствует хорошо структурированной разметке, создавая приятный опыт для тех, кто умеет её писать и читать.

Установка

Haml требует Ruby для компиляции в HTML, поэтому первый шаг для его использования — убедитесь, что установлен Ruby. К счастью для тех, кто работает на Mac OS X, система поставляется с предустановленным Ruby, а те, кто работают на Windows, могут перейти к установщику напрямую. После установки Ruby выполните следующую команду, используя Terminal или программу командной строки.

gem install haml

Файлы, написанные на Haml, должны сохраняться с расширением файла .haml. Чтобы затем преобразовать эти файлы из Haml в HTML команда haml ниже должна быть запущена для компиляции каждого отдельного файла.

haml index.haml index.html

В приведённом выше примере файл index.haml преобразован в HTML и сохранён как index.html в той же папке. Эта команда должна быть запущена в той же папке, в которой расположены файлы. В случае, если команда будет работать вне этой папки, путь к ней должен быть включён в команду. В любое время также может быть запущена команда haml --help для просмотра списка разных доступных опций.

Слежение за файлом или папкой

К сожалению, Haml не предлагает способ слежения за изменением файла или папки без использования других зависимостей.

Внутри приложения Rails зависимость Haml может быть добавлена в Gemfile, таким образом, автоматически компилируя файлы Haml в HTML при любых изменениях. Есть несколько настольных приложений, доступных для тех, кто не пользуется Rails, одним из наиболее популярных является CodeKit.

CodeKit также поддерживает другие препроцессоры, которые тоже могут вам пригодиться.

Доктайп

Первая часть при написании документа на Haml — это знание, какой тип доктайпа надо использовать. При работе с HTML-документами основным типом документа будет HTML5. В Haml типы документов определяются тремя восклицательными знаками (!!!), затем идёт что-то конкретное при необходимости.

По умолчанию доктайп в Haml — это HTML 1.0 Transitional. Поэтому чтобы сделать его как HTML5, нужно передать цифру пять после восклицательных знаков (!!! 5).

Haml

!!! 5

Готовый HTML

<!DOCTYPE html>

Объявление элементов

Одной из определяющих особенностей Haml является его синтаксис и то, как объявлять и вкладывать элементы. Элементы HTML, как правило, содержат открывающий и закрывающий теги, однако в элементах Haml есть только один открывающий тег. Элементы начинаются со знака процента (%), а затем отступ определяет вложенность. Отступ в Haml можно выполнить одним или несколькими пробелами, однако важно, чтобы отступы оставались неизменными. Табуляция и пробелы не могут сочетаться друг с другом и одно и то же число табуляций или пробелов должно быть одинаковым на протяжении всего документа.

Устранение необходимости в открывающих и закрывающих тегах, а также обязательная структура с отступами создаёт схему, за которой легко следить. В любой момент времени разметка может быть бегло просмотрена и изменена без труда.

Haml

%body
  %header
    %h1 Привет, мир!
  %section
    %p Lorem ipsum dolor sit amet.

Скомпилированный HTML

<body>
  <header>
    <h1>Привет, мир!</h1>
  </header>
  <section>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
</body>

Обработка текста

Текст в Haml может быть размещён на той же строке, что и объявленный элемент или с отступом ниже элемента. Текст не может быть одновременно на той же строке, что и объявленный элемент, и вложенным ниже него; должен быть или тот или другой вариант. Приведённый выше пример можно переписать в следующем виде:

%body
  %header
    %h1
      Привет, мир!
  %section
    %p
      Lorem ipsum dolor sit amet.

Атрибуты

Атрибуты, как и элементы, объявляются немного по-другому в Haml. Атрибуты объявляются непосредственно после элемента, в фигурных или круглых скобках, в зависимости от того, хотите вы использовать синтаксис Ruby или HTML. Атрибуты в стиле Ruby будут использовать стандартный синтаксис хэша внутри {}, в то время как атрибуты в стиле HTML будут использовать стандартный синтаксис HTML внутри ().

Haml

%img{:src => "shay.jpg", :alt => "Шэй Хоу"}
%img{src: "shay.jpg", alt: "Шэй Хоу"}
%img(src="shay.jpg" alt="Шэй Хоу")

Скомпилированный HTML

<img src="shay.jpg" alt="Шэй Хоу">

Классы и идентификаторы

При желании классы и идентификаторы могут быть объявлены подобно другим атрибутам, однако они также могут быть обработаны несколько иначе. Вместо перечисления атрибутов class и id с их значениями внутри скобок, значение может быть определено непосредственно после элемента. Используя либо точку для классов, либо решётку для идентификатора, значение может быть добавлено сразу после элемента.

Кроме того, атрибуты могут быть смешаны, соединяясь вместе в соответствующем формате. Классы должны разделяться точками, а другие атрибуты могут быть добавлены с помощью одного из ранее изложенных форматов.

Haml

%section.feature
%section.feature.special
%section#hello
%section#hello.feature(role="region")

Скомпилированный HTML

<section class="feature"></section>
<section class="feature special"></section>
<section id="hello"></section>
<section class="feature" id="hello" role="region"></section>

Классы и идентификаторы в <div>

В случае, если класс или идентификатор используется в <div>, то %div может быть опущен, а значение класса или идентификатора может быть включено напрямую. Опять же, классы должны определяться через точку, а идентификаторы через решётку.

Haml

.awesome
.awesome.lesson
#getting-started.lesson

Скомпилированный HTML

<div class="awesome"></div>
<div class="awesome lesson"></div>
<div class="lesson" id="getting-started"></div>

Логические атрибуты

Логические атрибуты обрабатываются так же, как если они были бы в Ruby или в HTML, в зависимости от используемого синтаксиса.

Haml

%input{:type => "checkbox", :checked => true}
%input(type="checkbox" checked=true)
%input(type="checkbox" checked)

Скомпилированный HTML

<input type="checkbox" checked>

Экранирование текста

Одним из преимуществ Haml является возможность вычислять и запускать Ruby, однако это не всегда желаемое действие. Текст и строки кода можно экранировать с помощью обратной косой черты (\), что позволяет тексту отображаться в явном виде без выполнения.

В приведённом ниже примере, первый образец = @author выполняется Ruby, получая имя авторов из приложения. Второй образец начинается с обратной косой черты, экранирующей текст, и печатается как есть без выполнения.

Haml

.author
  = @author
  \= @author

Скомпилированный HTML

<div class="author">
  Шэй Хоу
  = @author
</div>

Альтернативы экранирования текста

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

В этих случаях пригодится помощник Ruby. В приведённом ниже примере помощник используется для размещения точки непосредственно после последнего слова, но за пределами текста ссылки.

Haml

%p
  Шэй — 
  = succeed "." do
    %a{:href => "#"} молодец

Скомпилированный HTML

<p>Шэй —  <a href="#">молодец</a>.</p>

Комментарии

Подобно элементам и атрибутам, комментарии в Haml обрабатываются немного по-другому. Код может быть прокомментирован достаточно просто с использованием одной косой черты (/). Отдельные строки могут быть закомментированы с помощью косой черты в начале строки, а блоки кода могут быть закомментированы, будучи вложенными под косой чертой.

Haml

%div
  / Строка комментария
  Актуальная строка

/
  %div
    Закомментированный блок

Скомпилированный HTML

<div>
  <!-- Строка комментария -->
  Актуальная строка
</div>

<!--
  <div>
    Закомментированный блок
  </div>
-->

Условные комментарии

Условные комментарии также обрабатываются по другому в Haml. Чтобы создать условный комментарий используйте квадратные скобки ([]) вокруг условия. Эти квадратные скобки должны быть размещены непосредственно после косой черты.

Haml

/[if lt IE 9]
  %script{:src  => "html5shiv.js"}

Скомпилированный HTML

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

Тихие комментарии

Haml также предоставляет возможность создавать особые тихие комментарии. Тихие комментарии отличаются от основных комментариев HTML тем, что после компиляции любое содержание внутри тихого комментария полностью удаляется с этой страницы и не отображается в результатах. Тихие комментарии начинаются с дефиса, затем идёт решётка (-#). Как и с другими комментариями, тихие комментарии могут быть использованы для удаления одной или нескольких строк с помощью вложенности.

Haml

%div
  -# Удалённая строка
  Актуальная строка

Скомпилированный HTML

<div>
  Актуальная строка
</div>

Фильтры

Haml предлагает несколько фильтров, позволяющих использовать разные типы ввода внутри Haml. Фильтры начинаются с двоеточия, за которым идёт имя фильтра, к примеру, :markdown, со всем содержимым для фильтрации вложения под ним.

Распространённые фильтры

Ниже приведены некоторые распространённые фильтры, включая наиболее популярную группу :css и :javascript.

  • :cdata
  • :coffee
  • :css
  • :erb
  • :escaped
  • :javascript
  • :less
  • :markdown
  • :maruku
  • :plain
  • :preserve
  • :ruby
  • :sass
  • :scss
  • :textile

Фильтр Javascript

Haml

:javascript
  $('button').on('click', function(event) {
    $('p').hide('slow');
  });

Скомпилированный HTML

<script>
  $('button').on('click', function(event) {
    $('p').hide('slow');
  }); 
</script>

Фильтры CSS и Sass

Haml

:css
  .container {
    margin: 0 auto;
    width: 960px;
  }

:sass
  .container
    margin: 0 auto
    width: 960px

Скомпилированный HTML

<style>
  .container {
    margin: 0 auto;
    width: 960px;
  }
</style>

Интерполяция Ruby

Как упоминалось ранее, Haml может вычислять Ruby, а иногда могут возникать случаи, когда Ruby должен вычисляться внутри обычного текста. В этом случае Ruby должен быть интерполирован путём обёртывания необходимого кода на Ruby.

Ниже приведён пример на Ruby, который интерполируется как часть имени класса.

Haml

%div{:class => "student-#{@student.name}"}

Скомпилированный HTML

<div class="student-shay">

SCSS и Sass

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

Sass (Syntactically Awesome Stylesheets, синтаксически замечательная таблица стилей) пришёл первым и у него строгий синтаксис с отступами. Sassy CSS последовал вскоре после этого, предлагая такую же огневую мощь, что и Sass, но с более гибким синтаксисом, включая возможность писать простой CSS.

Установка

Как и Haml, SCSS и Sass компилируются с помощью Ruby, поэтому Ruby должен быть установлен для создания файлов CSS. Пожалуйста, следуйте вышеприведённым указаниям для установки или убедитесь, что Ruby уже установлен.

После установки Ruby требуется команда gem install sass для установки SCSS и Sass.

gem install sass

Файлы, написанные на SCSS или Sass, должны иметь, соответственно, расширения .scss или .sass. Чтобы преобразовать любой из этих типов файлов в .css необходимо выполнить следующую команду.

sass styles.sass styles.css

Команда выше принимает Sass-файл styles.sass и компилирует его в файл styles.css. Как и с Haml, эти имена файлов являются путями и должны быть указаны правильно. Приведённая выше команда работает, когда эти файлы находятся в папке, из которой выполняется команда. Если файлы находятся за пределами папки, то путь к ним должен быть явно указан в команде.

Если изменения в файле осуществляются постоянно, Sass может следить за файлом и перекомпилировать CSS каждый раз, когда происходит изменение файла. Чтобы Sass следил за файлом, может быть запущена следующая команда.

sass --watch styles.sass:styles.css

Кроме того, вместо компиляции или слежением за отдельным файлом, Sass способен компилировать и отслеживать целые папки. Например, чтобы следить за всей папкой с файлами Sass и конвертировать их в CSS, может быть выполнена команда ниже.

sass --watch assets/sass:public/css

Конвертирование файлов из SCSS в Sass и наоборот

У вас есть возможность конвертировать файлы SCSS и Sass в CSS, но вы также можете конвертировать файлы из SCSS в Sass и наоборот. Чтобы это сделать, может быть использована команда sass, показанная ниже, для преобразования файла SCSS в Sass, а затем файла Sass в SCSS, соответственно.

# Конвертируем Sass в SCSS
sass-convert styles.sass styles.scss

# Конвертируем SCSS в Sass
sass-convert styles.scss styles.sass

Синтаксис

Как уже отмечалось ранее, основное отличие между SCSS и Sass в их синтаксисе и разница эта в деталях. Синтаксис SCSS не сильно отличается по сравнению с обычным CSS. На самом деле, стандарт CSS будет работать внутри SCSS. Sass, с другой стороны, является довольно строгим и любой отступ или ошибки символов запретят компиляцию стилей. Sass опускает все фигурные скобки ({}) и точки с запятой (;), опираясь на отступы и сплошная строка разбивается для форматирования.

SCSS

.new {
  color: #ff7b29;
  font-weight: bold;
  span {
    text-transform: uppercase;
  }
}

Sass

.new
  color: #ff7b29
  font-weight: bold
  span
    text-transform: uppercase

Скомпилированный CSS

.new {
  color: #ff7b29;
  font-weight: bold;
}
.new span {
  text-transform: uppercase;
}

SCSS против Sass

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

Лично я предпочитаю синтаксис Sass, поскольку он требует меньше символов и обеспечивает, как я считаю, более чистый синтаксис. Sass не допускает прямой ввод CSS как это делает SCSS и не станет мириться с какими-либо ошибками написания. У Sass чуть лучше кривая обучения, однако она, как я вижу, идёт за счёт лёгкости управления стилями.

Дальнейшие примеры в этом уроке будут использовать Sass, однако они также могут быть все выполнены и на SCSS.

Вложения

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

Sass

.portfolio
  border: 1px solid #9799a7
  ul
    list-style: none
  li
    float: left

Скомпилированный CSS

.portfolio {
  border: 1px solid #9799a7;
}
.portfolio ul {
  list-style: none;
}
.portfolio li {
  float: left;
}

Вложенные свойства

Кроме вложения селекторов можно также вкладывать свойства. Некоторое наиболее популярное применение этого можно увидеть со свойствами font, margin, padding и border. Как и в вопросе, предпочесть SCSS или Sass, это очень личное решение. Многие считают, что сокращённые значения это хорошо и сыпать значениями в таком длинном формате не требуется. В конечном счёте вам решать, что предпочесть.

Sass

div
  font:
    family: Baskerville, Palatino, serif
    style: italic
    weight: normal

Скомпилированный CSS

div {
  font-family: Baskerville, Palatino, serif;
  font-style: italic;
  font-weight: normal;
}

Вложенные медиа-запросы

Отдельные медиа-запросы также могут вкладываться внутрь селектора, меняя значения свойств исходя из состояния носителя.

Sass

.container
  width: 960px
  @media screen and (max-width: 960px)
    width: 100%

Скомпилированный CSS

.container {
  width: 960px;
}
@media screen and (max-width: 960px) {
  .container {
    width: 100%;
  }
}

Родительский селектор

Sass предлагает способ добавления стилей к предыдущему селектору с помощью родительского селектора, реализуемого с помощью амперсанда (&). Чаще родительский селектор применяется в сочетании с псевдоклассом, таким как :hover, хотя это не всегда так. Кроме того, родительский селектор может быть использован, чтобы связать дополнительные селекторы с его родителем, например &.featured.

Sass

a
  color: #0087cc
  &:hover
    color: #ff7b29

Скомпилированный CSS

a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}

Родительский ключевой селектор

Родительский селектор также может быть использован в качестве ключевого селектора, добавляя отдельные селекторы для создания составных селекторов. Есть множество способов использовать родительский селектор в качестве ключевого, но, пожалуй, один из самых полезных способов — разместить внутри другого селектора.

Sass

.btn
  background: linear-gradient(#fff, #9799a7)
  .no-cssgradients &
    background: url("gradient.png") 0 0 repeat-x

Скомпилированный CSS

.btn {
  background: linear-gradient(#fff, #9799a7);
}
.no-cssgradients .btn {
  background: url("gradient.png") 0 0 repeat-x;
}

Комментарии

Sass обрабатывает комментарии очень похоже на Haml. Стандартный синтаксис CSS / * ... * / для комментариев работает, как предполагалось, и в Sass, однако есть также синтаксис тихих комментариев, чтобы полностью удалить комментарий или строки кода из компиляции.

Синтаксис для тихих комментариев — это две косые черты (//). Любое содержание на этой строке или вложенные под ней будут исключены из компиляции. Заметьте, что в приведённом ниже примере строка // Пропущенный комментарий не отображается в скомпилированном CSS.

Sass

/* Обычный комментарий */
div
  background: #333
// Пропущенный комментарий
strong
  display: block

Скомпилированный CSS

/* Обычный комментарий */
div {
  background: #333;
}

strong {
  display: block;
}

Переменные

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

Переменные определяются знаком доллара ($), за которым следует имя переменной. Между именем переменной и значением идёт двоеточие и пробел ($font-base: 1em). Что касается значения переменной — это может быть число, строка, цвет, логическое значение, null или список значений, разделённых пробелами или запятыми.

Sass

$font-base: 1em
$serif: "Helvetica Neue", Arial, "Lucida Grande", sans-serif

p
  font: $font-base $serif

Скомпилированный CSS

p {
  font: 1em "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
}

Интерполяция переменных

Большая часть переменных может быть включена в любом месте внутри документа Sass. Тем не менее, с ними иногда необходимо проводить интерполяцию с использованием синтаксиса. Есть несколько случаев, когда интерполяция переменных необходима, вроде использования в именах классов, именах свойств или внутри строки обычного текста.

Sass

$location: chicago
$offset: left

.#{$location}
  #{$offset}: 20px

Скомпилированный CSS

.chicago {
  left: 20px;
}

Вычисления

Sass также имеет возможность выполнять вычисления разными способами. Расчёты могут справиться с большинством задач, таких как сложение, вычитание, деление, умножение и округления.

Сложение совершается с помощью знака плюс (+) и может завершаться или нет единицами измерения. Когда это сделано с единицей, она связывается с первым числом в уравнении и затем эта единица будет использоваться в вычислении значения. К примеру, десять пикселей плюс один дюйм будет равняться 106 пикселям. Вычитание обрабатывается таким же образом, что и сложение, но со знаком минус (-) вместо этого.

Умножение выполняется с помощью символа звёздочки (*), однако только одно из чисел, если они указаны, может включать в себя единицу измерения. Использование знака процентов (%) возвращает остаток от деления двух чисел, и как с умножением, допускает только одно число, которое содержит единицу измерения.

Sass

width: 40px + 6
width: 40px - 6
width: 40px * 6
width: 40px % 6

Скомпилированный CSS

width: 46px;
width: 34px;
width: 240px;
width: 4px;

Деление

Деление в Sass происходит немного сложнее. Для выполнения деления применяется косая черта (/), которая уже используется в некоторых значениях свойств CSS. Вообще говоря, деление будет иметь место, когда какая-то часть значения использует переменную, если значение оборачивают в скобки или если значение используется как часть другого уравнения.

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

Sass

width: 100px / 10
width: (100px / 10)
width: (100px / 10px)
$width: 100px
width: $width / 10
width: 5px - 100px / 10

Скомпилированный CSS

width: 100px/10;
width: 10px;
width: 10;
width: 10px;
width: -5px;

Математика в деталях

Как можно ожидать, Sass также способен объединять несколько математических операций. Sass к тому же понимает, какие операции выполнять первыми, основываясь на применении скобок.

Sass

$grid: 16
$column: 40px
$gutter: 20px
$container: ($column * $grid) + ($gutter * $grid)

width: $container

Скомпилированный CSS

width: 960px;

Числовые функции

По умолчанию Sass включает в себя несколько встроенных функций, многие из которых используются для манипулирования числовыми значениями по желанию.

Функция percentage() превращает значение в проценты. Функция round() округляет значение до ближайшего целого числа, по умолчанию округляет вверх, где это необходимо. Функция ceil() округляет значение вверх до ближайшего целого числа, а функция floor() округляет значение вниз до ближайшего целого числа. И, наконец, функция abs() находит абсолютное значение заданного числа.

Sass

width: percentage(2.5)
width: round(2.5px)
width: ceil(2.5px)
width: floor(2.5px)
width: abs(-2.5px)

Скомпилированный CSS

width: 250%;
width: 3px;
width: 3px;
width: 2px;
width: 2.5px;

Цвет

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

Sass

color: rgba(#8ec63f, .25)

$green: #8ec63f
color: rgba($green, .25)

Скомпилированный CSS

color: rgba(142, 198, 63, .25);

Кроме чисел, математика может дополнительно применяться и для цвета, используя сложение, вычитание, умножение и деление. Эти вычисления выполняются для красной, зеленой и синей компонент, меняя их как предполагалось.

Sass

color: #8ec63f + #666
color: #8ec63f * 2
color: rgba(142, 198, 63, .75) / rgba(255, 255, 255, .75)

Скомпилированный CSS

color: #f4ffa5;
color: #ffff7e;
color: rgba(0, 0, 0, .75);

Операции с цветом

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

  • invert()
  • complement()
  • mix()
  • grayscale()

Sass

color: invert(#8ec63f)
color: complement(#8ec63f)
color: mix(#8ec63f, #fff)
color: mix(#8ec63f, #fff, 10%)
color: grayscale(#8ec63f)

Скомпилированный CSS

color: #7139c0;
color: #773fc6;
color: #c6e29f;
color: #f3f9eb;
color: #838383;

Операции с HSLa

Операции с HSLa делают дальнейшие шаги, добавляя больше преобразований. Некоторые наиболее популярные операции с HSLa включают lighten(), darken(), saturate() и desaturate().

  • lighten()
  • darken()
  • saturate()
  • desaturate()
  • adjust-hue()
  • fade-in()
  • fade-out()

Sass

color: lighten(#8ec63f, 50%)
color: darken(#8ec63f, 30%)
color: saturate(#8ec63f, 75%)
color: desaturate(#8ec63f, 25%)
color: adjust-hue(#8ec63f, 30)
color: adjust-hue(#8ec63f, -30)
color: fade-in(rgba(142, 198, 63, 0), .4)
color: fade-out(#8ec63f, .4)

Скомпилированный CSS

color: white;
color: #3b5319;
color: #98ff06;
color: #89a75e;
color: #4ac63f;
color: #c6bb3f;
color: rgba(142, 198, 63, 0.4);
color: rgba(142, 198, 63, 0.6);

Манипуляции с цветом

Кроме операций с цветом Sass также может манипулировать цветом напрямую. Такого рода манипуляции обеспечивает наибольший контроль над тонкой настройкой определённых свойств цвета. С этим контролем также повышается сложность, поэтому манипуляции с цветом делаются несколько реже, чем операции с цветом.

  • change-color() — Устанавливает любое свойство цвета
    $color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]
  • adjust-color() — Манипулирует любым свойством цвета по возрастающей
    $color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]
  • scale-color() — Гибко масштабирует любым процентом, основываясь на свойстве цвета
    $color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]

Sass

color: change-color(#8ec63f, $red: 60, $green: 255)
color: adjust-color(#8ec63f, $hue: 300, $lightness: 50%)
color: scale-color(#8ec63f, $lightness: 25%, $alpha: 30%)

Скомпилированный CSS

color: #3cff3f;
color: white;
color: #aad46f;

Расширения

Расширения предоставляют возможность легко обмениваться и повторно использовать стили без явного повторения кода или включать дополнительные классы, предлагая идеальный способ сохранить модульность кода. И элементы и классы могут быть использованы в качестве расширения, также есть селектор-заполнитель, построенный специально для расширений.

Расширения устанавливаются с помощью правила @extend, за которым следует селектор для расширения. Вместо дублирования свойств и значений, оригинальный селектор получает и дополнительный селектор, из которого вызывается расширение.

В целом, это даёт возможность быстро использовать код повторно без увеличения веса кода. Кроме того, расширения приятно сочетаются с OOCSS и SMACSS.

Sass

.alert
  border-radius: 10px
  padding: 10px 20px

.alert-error
  @extend .alert
  background: #f2dede
  color: #b94a48

Скомпилированный CSS

.alert,
.alert-error {
  border-radius: 10px;
  padding: 10px 20px;
}
.alert-error {
  background: #f2dede;
  color: #b94a48;
}

Селектор-заполнитель

Чтобы избежать создания кучи неиспользуемых классов чисто для расширений, мы можем использовать то, что известно как селектор-заполнитель. Он создаётся со знаком процентов (%) и никогда напрямую не компилируется в CSS. Вместо этого он применяется для прикрепления селекторов, когда они вызываются в расширении. В улучшенном примере ниже обратите внимание, что селектор .alert не переходит в CSS.

Sass

%alert
  border-radius: 10px
  padding: 10px 20px

.alert-error
  @extend %alert
  background: #f2dede
  color: #b94a48

Скомпилированный CSS

.alert-error {
  border-radius: 10px;
  padding: 10px 20px;
}
.alert-error {
  background: #f2dede;
  color: #b94a48;
}

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

Как и с классами, расширения также работают со стандартными селекторами элементов.

Sass

h2
  color: #9c6
  span
    text-decoration: underline

.sub-heading
  @extend h2

Скомпилированный CSS

h2, .sub-heading  {
  color: #9c6;
}
h2 span, .sub-heading span {
  text-decoration: underline;
}

Примеси

Примеси предлагают простой способ создания шаблонов свойств и значений, а затем обмениваться ими между разными селекторами. Примеси отличаются от расширений аргументами, передаваемые туда, где у расширений находятся фиксированные значения.

Примеси определяются с помощью правила @mixin, за которым следуют любые возможные аргументы, затем идут любые правила стилей. Для вызова примеси внутри селектора используется знак плюс (+), за которым следует имя примеси и желаемые значения аргументов при необходимости.

Стоит упомянуть, что SCSS обрабатывает примеси немного иначе. Вместо знака плюс для вызова примеси SCSS использует правило @include.

Sass

@mixin btn($color, $color-hover)
  color: $color
  &:hover
    color: $color-hover

.btn
  +btn($color: #fff, $color-hover: #9799a7)

Скомпилированный CSS

.btn {
  color: #fff;
}
.btn:hover {
  color: #9799a7;
}

Аргументы по умолчанию

Используя тот же самый пример выше, можно также указать значения аргументов по умолчанию, которые могут быть перезаписаны при желании.

Sass

@mixin btn($color: #fff, $color-hover: #9799a7)
  color: $color
  &:hover
    color: $color-hover

.btn
  +btn($color-hover: #9799a7)

Скомпилированный CSS

.btn {
  color: #fff;
}
.btn:hover {
  color: #9799a7;
}

Переменные аргументы

Когда одно или несколько значений должны быть переданы в качестве аргумента, то имя переменной внутри примеси может заканчиваться многоточием (...). В приведённом ниже примере с тенью мы можем передать в примесь значения, разделённые запятыми.

Sass

@mixin box-shadow($shadow...)
  -webkit-box-shadow: $shadow
  -moz-box-shadow: $shadow
  box-shadow: $shadow

.shadows
  +box-shadow(0 1px 2px #cecfd5, inset 0 0 5px #cecfd5)

Скомпилированный CSS

.shadows {
  -moz-box-shadow: 0 1px 2px #cecfd5, inset 0 0 5px #cecfd5;
  -webkit-box-shadow: 0 1px 2px #cecfd5, inset 0 0 5px #cecfd5;
  box-shadow: 0 1px 2px #cecfd5, inset 0 0 5px #cecfd5;
}

Импорт

Одной из самых приятных частей Sass является его способность импортировать несколько файлов .scss или .sass и сжимать их в один файл. Сжатие всех файлов в один позволяет использовать несколько таблиц стилей для лучшей организации, не беспокоясь о многочисленных HTTP-запросах.

Вместо того, чтобы ссылаться на все разные таблицы стилей внутри HTML-документа, ссылаемся только на один файл Sass, который импортирует все остальные таблицы стилей.

В следующих примерах все три файла normalize.sass, _grid.sass и typography.sass компилируются в один файл. В этом случае, если файл Sass с именем styles.sass импортирует все остальные файлы, и он компилируется в styles.css, то в HTML-документе следует ссылаться только на styles.css.

Sass

@import "normalize"
@import "grid", "typography"

Скомпилированный HTML

<link href="styles.css" rel="stylesheet">

Циклы и условные выражения

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

Операторы

Некоторые циклы и условные выражения потребуют операторов для определения их поведения. Их можно разбить на операторы сравнения и операторы равенства. Операторы сравнения рассматривают отношения двух объектов, в то время как операторы равенства определяют равенство или различие между объектами.

  • <
    Меньше
  • >
    Больше
  • ==
    Равно
  • <=
    Меньше или равно
  • >=
    Больше или равно
  • !=
    Не равно
// Операторы сравнения
6 < 10   // истина
4 <= 60  // истина
8 > 2    // истина
10 >= 10 // истина

// Операторы равенства
#fff == white  // истина
10 + 30 == 40  // истина
normal != bold // истина

Функция if

Правило проверки выражения @if загружает стили под этим выражением, если оно возвращает что-то, кроме false или null. Начально выражение @if может быть дополнено несколькими выражениями @else if и одним @else. Как только выражение успешно определено, будут применены стили, непосредственно привязанные к нему.

Sass

$shay: awesome

.shay
  @if $shay == awesome
    background: #ff7b29
  @else if $shay == cool
    background: #0087cc
  @else
    background: #333

Скомпилированный CSS

.shay {
  background: #ff7b29; 
}

Цикл for

Правило @for выводит разные наборы стилей, основываясь на переменной счётчика. Есть две различные формы, доступные для циклов @for — to и through. Первый, к примеру, @for $i from 1 to 3 будет выводить стили до 3, не включая его. Другая форма, @for $i from 1 through 3 будет выводить стили до 3, включая его.

Sass

@for $col from 1 to 6
  .col-#{$col}
    width: 40px * $col

Скомпилированный CSS

.col-1 {
  width: 40px;
}
.col-2 {
  width: 80px;
}
.col-3 {
  width: 120px;
}
.col-4 {
  width: 160px;
}
.col-5 {
  width: 200px;
}

Цикл each

Достаточно просто, правило @each возвращает стили для каждого элемента в списке. Список может включать несколько элементов, разделённых запятыми.

Sass

@each $class in uxd, rails, html, css
  .#{$class}-logo
    background: url("/img/#{$class}.jpg")

Скомпилированный CSS

.uxd-logo {
  background: url("/img/uxd.jpg");
}
.rails-logo {
  background: url("/img/rails.jpg");
}
.html-logo {
  background: url("/img/html.jpg");
}
.css-logo {
  background: url("/img/css.jpg");
}

Цикл while

Правило @while постоянно возвращает стили, пока выражение не станет ложным. Эта директива принимает несколько различных операторов и переменная счётчика позволяет тонко контролировать точность цикла.

Sass

$heading: 1
  @while $heading <= 6
    h#{$heading}
      font-size: 2em - ($heading * .25em)
    $heading: $heading + 1

Скомпилированый CSS

h1 {
  font-size: 1.75em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.25em;
}
h4 {
  font-size: 1em;
}
h5 {
  font-size: 0.75em;
}
h6 {
  font-size: 0.5em;
}

Другие препроцессоры

Haml и Sass не единственные доступные препроцессоры, включая также препроцессоры JavaScript. Вот некоторые другие популярные препроцессоры: Jade, Slim, LESS, Stylus и CoffeeScript.

Ради краткости Haml и Sass были единственными препроцессоры, рассмотренные в этом уроке. Они также были выбраны потому, что построены с использованием Ruby и прямо подходят к приложениям Ruby on Rails. Они также получили огромную поддержку сообщества.

Когда речь заходит о выборе, какой препроцессор использовать, важно рассмотреть вопрос о том, что лучше для вашей команды и проекта. Проекты, построенные в Node.js могут, вероятно, больше выиграть от Jade и Stylus. Самым важным аспектом для рассмотрения, однако, является то, что ваша команда привыкла использовать. Проведите исследование для каждого проекта и выберите наиболее обоснованное решение.

Ресурсы и ссылки

Автор: Шэй Хоу
Последнее изменение: 20.02.2024