Пожалуй, стоило бы затронуть тему «быстрого написания css-кода, разложенного по полочкам». Именно таким автору данной заметки видится sass — инструмент, позволяющий совершить волшебное преобразование: превратить рутинное написание css-кода в любопытное занятие.

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

Что пропустим

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

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

Тем, кто начинает делать свой проект и сам себе дизайнер совет: придерживайтесь стандартных рекомендаций. А именно: размер шрифта достаточный для того, чтобы читателю не приходилось испытывать неудобства, находясь на расстоянии 40см от монитора; заголовки — шрифт с засечками, основной текст — шрифт без засечек (хотя и здесь есть нюансы, зависит от величины шрифта); выравнивание текста по ширине остаётся спорным вопросом.

Если читатель имеет намерение серьёзно заняться указанной проблемой, рекомендуется обратиться к какой-нибудь хорошей книге по типографике.

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

Введение

Что за зверь?

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

Раньше sass устанавливался только при помощи gem, а значит требовал предварительной установки ruby. Теперь это не требуется, если вы пользуетесь каким-либо сборщиком будть то grunt, gulp или webpack.

SCSS — так именуется Sass с 3-ей версии (Sassy CSS). Основным отличием от предыдущих версий является возможность писать на каноническом CSS. Также до третьей версии можно было писать код без скобок, но SCSS больше не приемлет этот синтаксис: это гарантирует, что обычный CSS будет корректно обработан в SCSS-файлах.

SASS и командная строка

Любители ruby часто используют связку sass + compass. Немного поговорим о ней, а затем начнём изучать особенности самого препроцессора.

Модуль Sass может быть использован как инструмент конвертирования в CSS в режиме командной строки. Он будет преобразовывать scss в css на лету. Этот вариант подходит тем, кто работает с ruby и не любит nodejs. Всем остальным рекомендуются к применению сборщики.

Указываем две директории: где лежат sass-файлы и куда складывать css:

$ sass ––watch sass_folder:stylesheets_folder

Sass будет отслеживать изменившиеся файлы автоматически.

Для обратной конвертации нам понадобится sass-convert:

$ sass-convert ––from css ––to sass –R

Кроме того, на выходе можно получать сжатый css. Для этого при сборке следует указать определённый флаг:

$ sass style.scss style.css --style compressed

Compass

Compass — CSS фреймворк, предоставляющий набор готовых подпрограмм для Sass. Он призван сделать вашу работу как можно более простой. В примере используется в основном для удобной сборки нескольких scss файлов в один файл css, хотя возможности у него огромные.

Предполагается, что ruby у вас уже установлен, поэтому сразу обратимся к установке необходимых джемов. В linux последовательность команд следующая:

$ sudo gem install sass compass

Вместо каталога под css создадим каталог с scss-файлами, который назовём sass. Рядом положим конфигурационный файл config.rb для того, чтобы указать compass’у расположение наших данных. Примерное содержимое:

#config.rb

# Require any additional compass plugins here.
project_type = :stand_alone

# Publishing paths
http_path = "/"
http_images_path = "../img"
http_generated_images_path = "../img"
http_fonts_path = "/fonts"
css_dir = "/css"

# Local development paths
sass_dir = "sass"
images_dir = "/img"
fonts_dir = "/fonts"

line_comments = false
output_style = :compressed #сжимать код
# output_style = :expanded

В целом здесь всё ясно и без лишних слов. Тем не менее давайте немного пройдёмся по возможным опциям.

ОпцияЗначение
project_path:stand_alone или :rails
http_pathуказание корневой директории проекта
http_pathпуть к проекту на веб-сервере
css_dirкуда сохранять css-файлы
sass_dirгде искать scss
output_styleкак именно хранить код (сжимать/не сжимать)
disable_warningsотключить предупреждения

При указанных выше настройках структура каталогов должна быть следующей:

$ tree static
|-- config.rb
|-- css
|-- fonts
|-- img
|   |-- dotted-border.png
|   |-- noise.jpg
`-- sass
    |-- lib
    |   |-- _layout.scss
    |   |-- _main.scss
    |   |-- _theme.scss
    |   `-- _typography.scss
    `-- screen.scss

Если вы создаёте проект с нуля, последовательность команд может быть следующей:

$ compass create path/to/project
$ cd path/to/project
$ compass watch

Особенности SASS

Разделение кода

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

В _layout.scss поместим костяк, основу нашего макета; в _main.scss опишем отдельные элементы страницы; в _theme.scss обозначим используемые цвета дабы не приходилось исследовать многостраничный код и изменять все места, где был использован один и тот же цвет; в _typography.scss укажем используемые шрифты.

/* lib/_layout.scss */

body {
  color: $text-color;
  background-color: $light-gray;
}
#outer-wrapper {
  width: 100%;
  font: normal 100% $sans;
}

/* lib/_main.scss */
blockquote {
  margin-bottom: 1em;
  padding: .5em;
  border: 1px dashed $border;
  padding-left: .6em;
  font-style: italic;
}
a {color: $light-blue; text-decoration: none;
  &:hover {color: $blue; text-decoration: underline;}
  &:visited {color: $violet;}
}

/* lib/_theme.scss */
$violet:     #7e7e96;
$blue:       #688fad;
$gray:       #c9c9c9;
$dark-gray:  #4b4b4b;
$header-text-color: $dark-gray;

/* lib/_typography.scss */
@import "_theme";
$sans: Arial, Helvetica, sans-serif;
$serif: Georgia, Times, serif;
$mono: "Menlo", "Fira Mono", monospace;
$heading-font-family: "Helvetica Neue", Arial, sans-serif;

И соберём всё это в едином файле: screen.scss:

@import "lib/_theme";
@import "lib/_typography";
@import "lib/_layout";
@import "lib/_main"

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

Переменные

Пожалуй, это одна из наиболее удобных вещей в Sass. Вам больше не нужно пробегаться по коду с автозаменой — меняйте всего одну переменную. Выше вы уже могли видеть как это выглядит на примере задания определённых цветов в lib/_theme.

Вложенность

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

/* этот участок SCSS */
a {
  color: $blue;
  &:hover: {
    color: $dark-blue;
    text-decoration: line-through;
  }
}

/* скомпилируется в привычный и менее наглядный на css*/
a {color: #688fad;}
a:hover {color: #53728a; text-decoration: line-through;}

Символ & равнозначен родительскому селектору.

Математика

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

/* играем с шириной блока */
.div {
  width: $width/6 - 10px;
}

/* изменяем цвета */
.div {
  $color: #010203;
  a: $color;
  &:hover { $color * 2; }
}

Подпрограммы

Так называемые mixins помогают сберечь время, если вам нужно указать для разных элементов один и тот же набор данных. Допустим, к нескольким элементам надо применить одни и те же значения border и border-radius. Чтобы не искать и не изменять каждое значение у всех элементов, создайте подпрогамму и включайте её код куда потребуется.

@mixin border-circle {
  border-radius: 50%;
  border: 1px solid $gray;
}

pre { @include border-circle; }
img { @include border-circle; }

Нужно принимать во внимание, что подпрограммы могут значительно увеличить объём css-файла, получаемого на выходе. Часто рекомендуется использовать mixins для вычислений, но заменять их на extends (расширения) там, где есть переменные. И здесь без объяснений не обойтись.

Достаточно посмотреть на код, который получится на выходе. Обратимся к примеру:

/* @mixins */
@mixin input-form {
    border:1px solid #d0d0d0;
    background-color:#fcfcfc;
    border-radius:15px;
    height:25px;
}
.site-form__input-text {
    color: #fff;
    @include input-form;
}
.site-form__input-text:focus {
    color: #ddd;
    @include input-form;
}

/* полученный css */
.site-form__input-text {
  color: #fff;
  border: 1px solid #d0d0d0;
  background-color: #fcfcfc;
  border-radius: 15px;
  height: 25px;
}

.site-form__input-text:focus {
  color: #ddd;
  border: 1px solid #d0d0d0;
  background-color: #fcfcfc;
  border-radius: 15px;
  height: 25px;
}

Как это будет выглядеть при использовании наследования

/* @extends */
.input-form {
    border:1px solid #d0d0d0;
    background-color:#fcfcfc;
    border-radius:15px;
    height:25px;
}

.site-form__input-text {
    color: #fff;
    @extend .input-form;
}
.site-form__input-text:focus {
    color: #ddd;
    @extend .input-form;


 /* полученный css */
.input-form, .site-form__input-text, .site-form__input-text:focus {
    border: 1px solid #d0d0d0;
    background-color: #fcfcfc;
    border-radius: 15px;
    height: 25px;
}

.site-form__input-text {
    color: #fff;
}

.site-form__input-text:focus {
    color: #ddd;
}

То есть в каком бы месте вы не подключили расширение @extend, итоговый код будет оптимальным. С mixin’ами же каждое новое включение влечёт за собой увеличение участков одного и того же кода. Понятно, что злоупотреблять ими не нужно.

Вот такой небольшой обзор. Теперь вы получили примерное представление о Sass, и, думаю, успели решить использовать его или нет. ⤧  Следующая запись Навигация по документу в LaTeX