При верстке макета довольно часто возникает задача создания кликабельного логотипа страницы.

Но логотип страницы, как правило, создается с использованием на все 100% фантазии дизайнера - тут и необычный декоративный шрифт, и всякие добавленные в него изображения. Поэтому на практике обычно такой логотип вырезается из psd-макета целиком, в виде картинки.

В HTML-разметке в заголовке страницы помещается текст-логотип сайта в теге первого уровня

1
h1
- все по правилам SEO. А в таблицах стилей производится подмена текста на вырезанное из макета изображение.

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

Первоначально произведем подключение неоходимого модуля в библиотеке Compass, добавив строку импортирования в проект:

@import "compass/typography/text/replacement";

… а затем приступим к изучению миксинов.

Миксин hide-text

Первым миксином, который решает задачу замены текста изображением, является

1
hide-text
.

Синтаксис этого миксина таков:

@include hide-text([$direction])

… где необязательный аргумент

1
$direction
определяет направление скрытия текста.

Пример использования данного миксина:

<h1 class="hidetext">
  mixin hide-text
</h1>
.hidetext{
  margin: 10px auto;
  width: 640px;
  height: 426px;
  background: url(../img/cat.jpg) 0 0 no-repeat;
}

Текст с фоновым изображением

Подключим к вышеприведенному коду миксин

1
hide-text
и посмотрим на результат:

.hidetext{
...
  @include hide-text;
}

Результат замещения текста с помощью миксина hide-text

Результирующий CSS-код будет выглядеть таким образом. Добавляются смещение текста с помощью свойства

1
text-indent
с отрицательным значением; предотвращается случайное “схлопывание” блока через свойство
1
overflow: hidden
, если в нем вдруг окажутся плавающие элементы; задается расположение текста с левого края блока через свойство
1
text-align: left
, чтобы гарантировать его смещение за левый край блока через свойство
1
text-indent
:

.hidetext{
  ...
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
}

Миксин squish-text

В библиотеке Compass также имеется миксин

1
squish-text
для замещения текста изображением с помощью эффекта скрытия данного текста. Другими словами, текст остается на своем месте, просто с помощью определенных CSS-свойств он делается визуально невидимым. Это может быть удобно для браузеров-читалок, которые проговаривают текст вслух для слабовидящих людей.

Синтаксис миксина

1
squish-text
таков:

@include squish-text;

Пример использования миксина

1
squish-text
:

<h1 class="squishtext">
  Mixin squish-text
</h1>
...
.squishtext{
  color: white;
  text-align: center;
  font-size: 3em;
  font-weight: bold;
  margin: 10px auto;
  width: 640px;
  height: 480px;
  background: url(../img/girl.jpg) 0 0 no-repeat;
}

Текст с фоновым изображением

Подключим миксин

1
squish-text
и посмотрим на результат его работы:

.squishtext{
  ...
  @include squish-text;
}

Результат замещения текста с помощью миксина squish-text

Результат компилирования представленного выше SCSS-кода в CSS-код показан ниже. Довольно интересный способ скрытия текста, который стоит рассмотреть более подробно. С помощью CSS-свойства

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

.squishtext {
  ...
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
}

Несмотря на то, что визуально результат работы миксина

1
squish-text
аналогичен работе миксина
1
hide-text
, принцип последнего более эффективен для большинства современных браузеров в вопросе замещения inline-текста.

В показанном ниже примере можно улучшить разметку, “обернув” отдельные участки текста в любой из inline-элементов (

1
span
,
1
b
или
1
i
) и добавив к нему ноебходимый класс:

<p class="squish">Lorem ipsum dolor sit amet,<span class="squish-text"> consectetur adipisicing elit,</span> sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor <span class="squish-text">in reprehenderit in voluptate velit esse</span> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <span class="squish-text">cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
.squish{
  margin: 0 auto;
  @include margin-leader;
  max-width: 960px;
  font-family: 'PT Sans', sans-serif;
  .squish-text{
    color: hsla(240,100%,50%,.6);
    font-style: italic;
  }
}

Текст с отдельными участками, подлежащими скрытию

.squish{
  ...
  .squish-text{
    ...
    @include squish-text;
  }
}

В то время, как экранные программы-читалки и другие подобные инструменты могут свободно прочитать “спрятанный” текст, в окне обычного браузера он ни как не отображен:

Скрытие текста с помощью миксина squish-text

Замещение текста изображением с фиксированными размерами

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

Преимущество данного миксина заключается в автоматизированном способе установки размеров для элемента в соответствии с размерами используемого изображения. Для этой цели в библиотеке Compass имеется миксин с говорящим названием

1
replace-text-with-dimensions
:

@include replace-text-with-dimensions();

Проиллюстрируем применение миксина

1
replace-text-with-dimensions
:

<h1 class="replace_dimensions">
  replace-text-with-dimensions
</h1>

Текст с непримененным миксином replace-text-with-dimensions

.replace_dimensions{
  @include replace-text-with-dimensions('alsatian.jpg');
}

Не забудьте активировать строку

1
relative_assets = true
в конфигурационном файле
1
config.rb
, чтобы сработали относительные пути для изображений!

Текст с примененным миксином replace-text-with-dimensions

Мне кажется, было бы очень любопытно взглянуть на результирующий код компиляции в CSS. Видим, что на изображение указывает корректная ссылка; а также, что у изображения установлены правильные ширина (

1
width
) и высота (
1
height
). Все это благодаря Compass!

.replace_dimensions {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url('../img/alsatian.jpg?1400248446');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 640px;
  height: 470px;
}

Замена текста изображением в HTML5 Boilerplate

За годы существования веб-разработки было создано немало оригинальных способов замещения текста изображением. На сегодняшний день наиболее лучшим способом является техника, представленная в хорошо известном проекте HTML5 Boilerplate.

Ниже показан пример исходного CSS-кода, взятого из “HTML5 Boilerplate”, в котором показаны в виде классов различные способы замещения текста изображением. В каждом случае кратко описываются преимущества каждого из способов:

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

// Скрыть текст от экранных читалок и браузеров

.hidden {
    display: none !important;
    visibility: hidden;
}

// Скрыть текст только визуально, но оставить доступным для экранных читалок

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

// Расширение класса .visuallyhidden благодаря возможности для элементов получать фокус с клавиатуры

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

// Скрыть текст визуально и от экранных читалок, но оставить нетронутой HTML-разметку

.invisible {
    visibility: hidden;
}

На этом все. Данная статья является вольным переводом отдельной главы из книги Ben Frain “Sass and Compass for Designers”.


Как часто верстальщику в своей работе требуется создавать спрайты?

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

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

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

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

Создание нового проекта в Compass

Создаем чистый Compass-проект с нуля, как обычно:

compass create sprites

… и настраиваем конфигурационный файл

1
config.rb
этого проекта, приведя к следующему виду:

http_path = "/"
  css_dir = "css"
  sass_dir = "sass"
  images_dir = "img"
  javascripts_dir = "js"

  output_style = :expanded
  relative_assets = true
  line_comments = false

Особенно стоит обратить внимание на предпоследнюю строку:

relative_assets = true

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

Подключение плагина спрайтов

Делается это как обычно в библиотеке Compass, одной строкой импортирования:

@import "compass/utilities/sprites";

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

Затем создадим в каталоге

1
img
подкаталог
1
webicons
(
1
img/webicons
) и распакуем в него скачанный архив.

Также стоит отметить, что плагин для работы со спрайтами в библиотеке Compass может работать только с изображениями формата

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

Скачивание библиотеки с иконками

Набор темных иконок в формате

1
.png
подойдет любой, главное, чтобы он был бесплатным. Например, такой - WPZOOM Developer Icon Set.

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

img/webicons

Подключение набора иконок в проект

Подключение набора изображений (иконок в нашем случае) в проект производится директивой:

@import "webicons/*.png";

Точнее, этой директивой создается карта изображений

1
map
.

Создание спрайта

Спрайт создается в библиотеке Compass c помощью миксина

1
@include all-[folder-name]-sprites;
, где [folder-name] - имя каталога с изображениями. В нашем случае данный миксин будет выглядеть таким образом:

@include all-webicons-sprites;

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

1
.png
:

Созданный в Compass спрайт

В файле

1
style.css
сгенерируется код, в котором появятся имена классов для каждого из изображений. Также для каждого из изображений будет добавлено позиционирование (точнее - оно будет вычислено). Также стоит обратить внимание на CSS-свойство
1
background
.

Значение его имеет правильный относительный путь -

1
../img/...
, это сработала переменная
1
relative_assets = true
в конфигурационном файле
1
config.rb
.

...
.webicons-sprite, .webicons-agenda, .webicons-arrow-down, .webicons-arrow-left-down, .webicons-arrow-left-up, .webicons-arrow-left, .webicons-arrow-right-down, .webicons-arrow-right-up, .webicons-arrow-right, .webicons-arrow-up {
  background: url('../img/webicons-sf124b45856.png') no-repeat;
}

.webicons-agenda {
  background-position: 0 -172px;
}

.webicons-arrow-down {
  background-position: 0 -266px;
}

.webicons-arrow-left-down {
  background-position: 0 -43px;
}

.webicons-arrow-left-up {
  background-position: 0 0;
}
...

Создание списка

В HTML-документе создаем обычный маркированный список:

<div class="wrap">
  <ul>
    <li>
      <a href="#">Link 1</a>
    </li>
    <li>
      <a href="#">Link 2</a>
    </li>
    <li>
      <a href="#">Link 3</a>
    </li>
    <li>
      <a href="#">Link 4</a>
    </li>
    <li>
      <a href="#">Link 5</a>
    </li>
  </ul>
</div>

… и выполняем его легкое форматирование на SCSS:

.wrap{
  max-width: 960px;
  margin: 0 auto;
  ul{
    @include horizontal-list($padding);
    li{
      a{
        padding-left: $base-line-height;
        display: block;
      }
    }
  }
}

Преобразуем маркированный список с помощью магии Compass в горизонтальный список, воспользовавшись миксином

1
horizontal-list($padding, $direction)
. Аргумент
1
$direction
опустим за ненадобностью, а в качестве аргумента
1
$padding
передадим отступ, равный переменной:

  ...
$base-line-height: 33px;
$padding: $base-line-height;
  ...

Добавление иконок в список

Можно воспользоваться готовыми именами классов, созданными библиотекой Compass. То есть, открыть (в нашем случае) файл

1
style.css
, взять оттуда нужные имена классов (
1
.webicons-agenda
,
1
.webicons-arrow-down
,
1
.webicons-arrow-left-down
,
1
.webicons-arrow-left-up
, …) и добавить их в HTML-разметку.

Но такой способ будет не совсем правильным, так как HTML-разметка будет “загрязнена” избыточными именами классов. Когда как можно легко избежать этого недостатка, применив директиву

1
@extend
:

&:nth-of-type(1) a{
  @extend .webicons-arrow-left-up;
}
&:nth-of-type(2) a{
  @extend .webicons-arrow-right-down;
}
&:nth-of-type(3) a{
  @extend .webicons-arrow-left-down;
}
&:nth-of-type(4) a{
  @extend .webicons-arrow-down;
}
&:nth-of-type(5) a{
  @extend .webicons-agenda;
}

Оцените чистоту этого способа - HTML-разметка не тронута, а в HTML-документе все работает так, как и было задумано.

Управлением расположения иконок на спрайте

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

Переменная

1
[folder-name]-layout: vertical | horizontal | diagonal | smart
управляет расположением иконок в создаваемом библиотекой Compass спрайте.

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

  $webicons-layout: vertical;

По умолчанию в переменной

1
[folder-name]-layout
используется значение
1
vertical
:

Вертикальное расположение иконок

… которое можно поменять на три других:

  • 1
    
    горизонтальное
    
    -
    1
    
    horizontal
    
    :

Горизонтальное расположение иконок

  • 1
    
    диагональное
    
    -
    1
    
    diagonal
    
    :

Диагональное расположение иконок

  • стоит особо отметить “умное” расположение -
    1
    
    smart
    
    , которое умеет экономить место на спрайте (сравните в почти точно таким же расположением изображений при вертикальном
    1
    
    layout
    
    и почувствуйте разницу!):

Умное расположение иконок

Добавлять переменную

1
[folder-name]-layout
нужно перед объявлением каталога с иконками:

  ...
$webicons-layout: 'smart';
  ...
@import "webicons/*.png";

Управление расстоянием между изображениями на спрайте

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

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

1
[folder-name]-spacing
.

В имени этой переменной

1
folder-name
- это имя каталога с расположенными в нем изображениями. В нашем случае имя каталога
1
webicons
, поэтому имя переменной будет -
1
$webicons-spacing
.

Для примера зададим расстояние в 10px между изображениями на спрайте:

$webicons-spacing: 10px;
  ...
@import "webicons/*.png";

В результате между изображениями появиться промежуток, равный 10px:

Увеличенное расстояние между изображениями на спрайте

Управление именами создаваемых классов в спрайте

Можно изменить тот способ, каким библиотека Compass создает имена классов в спрайте.

Первоначальный (по умолчанию) вид имен классов имеет представление:

...
.webicons-arrow-down {
  background-position: 0 -326px;
}

.webicons-arrow-left-down {
  background-position: 0 -53px;
}

.webicons-arrow-left-up {
  background-position: 0 0;
}
...

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

.webicons{
  .arrow-left-up {@include webicons-sprite(arrow-left-up);}
  .arrow-right-down {@include webicons-sprite(arrow-right-down);}
}

… и посмотрим на конечный результат:

.webicons .arrow-left-up {
  background-position: 0 0;
}

.webicons .arrow-right-down {
  background-position: 0 -106px;
}

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

...

&:nth-of-type(1) a{
  @extend .webicons-arrow-left-up;
}

&:nth-of-type(2) a{
  @extend .webicons-arrow-right-down;
}

&:nth-of-type(3) a{
  @extend .webicons-arrow-left-down;
}

...

Получение размеров создаваемого спрайта

Иногда может потребоваться так, чтобы при генерации спрайта библиотекой Compass автоматически были “отображены” в файле

1
.css
размеры каждого изображения. Входящего в состав этого спрайта.

По умолчанию размеры изображений не отображаются в готовом CSS-коде:

...

.webicons-arrow-down {
background-position: 0 -326px;
}
...

.webicons-arrow-left-down {
background-position: 0 -53px;
}
...

Но при включении переменной

1
[folder-name]-sprite-dimensions: true;
(по умолчанию ее значение равно
1
false
) размеры каждого из изображений будут отображены в CSS-коде:

...
.webicons-arrow-down {
background-position: 0 -326px;
height: 46px;
width: 42px;
}

.webicons-arrow-left-down {
background-position: 0 -53px;
height: 43px;
width: 43px;
}
...

Как и в предыдущих случаях с переменными в спрайте библиотеки Compass, вместо

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

$webicons-sprite-dimensions: true;
  ...
@include 'webicons/*.png';

Пока на этом все …


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

Так как Sass и Compass не имеют графического интерфейса, то вся работа будет выполняться в командной строке (или терминале, кому как нравиться). К слову стоит от себя сказать, что лично я предпочитаю работать в командной строке OS Linux, так как терминал Windows для меня - испытание не для моих слабых нервов.

Узнать текущую версию Sass можно командой:

$ sudo  sass -v
Sass 3.2.19 (Media Mark)

Проверить текущую версию Compass можно аналогичной командой:

$ sudo  compass -v
Compass 0.12.6 (Alnilam)
...

Проверить доступные версии Sass и Compass

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

Например, запуск команды:

$ sudo gem list sass -a -r

… заставит Ruby вывести список пакетов (

1
gem
), содержащих в своем имени слово
1
sass
; ключ
1
-a
скажет Ruby, что нужно вывести список всех (
1
all
) пакетов; ключ
1
-r
скажет Ruby, что этот список нужно получить удаленно, из репозитория.

Для Compass команда будет выглядеть аналогично, за исключением ключевого слова

1
compass
:

$ sudo gem list compass -a -r

Проверю наличие такого списка из своей собственной локальной машины:

$ sudo gem list sass -a -r

*** REMOTE GEMS ***

sass (3.3.7, 3.3.6, 3.3.5, 3.3.4, 3.3.3, 3.3.2, 3.3.1, 3.3.0, 3.2.19, 3.2.18, 3.2.17, 3.2.16, 3.2.15, 3.2.14, 3.2.13, 3.2.12, 3.2.11, 3.2.10, 3.2.9, 3.2.8, 3.2.7, 3.2.6, 3.2.5, 3.2.4, 3.2.3, 3.2.2, 3.2.1, 3.2.0, 3.1.21, 3.1.20, 3.1.19, 3.1.18, 3.1.17, 3.1.16, 3.1.15, 3.1.14, 3.1.13, 3.1.12, 3.1.11, 3.1.10, 3.1.9, 3.1.8, 3.1.7, 3.1.6, 3.1.5, 3.1.4, 3.1.3, 3.1.2, 3.1.1, 3.1.0)
...
$ sudo gem list compass -a -r

*** REMOTE GEMS ***

compass (0.12.6, 0.12.5, 0.12.4, 0.12.3, 0.12.2, 0.12.1, 0.12.0, 0.11.7, 0.11.6, 0.11.5, 0.11.4, 0.11.3, 0.11.2, 0.11.1, 0.11.0, 0.10.6, 0.10.5, 0.10.4, 0.10.3, 0.10.2, 0.10.1, 0.10.0, 0.8.17, 0.8.16)
...

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

Узнать наличие и номера нестабильных версий пакетов Sass и Compass можно с помощью команд:

$ sudo gem list compass --pre -r
$ sudo gem list sass --pre -r

Установить нестабильные (prerelease) версии Sass и Compass

Чтобы установить самую последнюю стабильную версию Sass, нужно выполнить команду:

$ sudo gem install sass

Если же в нестабильной (разрабатываемой) версии Sass есть фичи, которые необходимы вам на данный момент, то можно установить

1
prerelease
версию с помощью команды:

$ sudo gem install sass --pre

Аналогично можно поступить с Compass. Последняя стабильная версия этого пакета устанавливается командой:

$ sudo gem install compass

… а нестабильная версия пакета устанавливается командой:

$ sudo gem install compass --pre

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

Удаление определенной версии Sass или Compass

Чтобы деинсталлировать определенную версию пакета Sass или Compass, нужно выполнить команду:

$ sudo gem uninstall sass --version version_number

… или:

$ sudo gem uninstall compass --version version_number

… где

1
version_number
- это номер версии удаляемого пакета; ключ
1
--version
говорит Ruby, что необходимо производить деинсталляцию по номеру версии пакета.

На этом все.


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

Плагин Susy 2 предоставляет возможность для работы с такими сетками. Но первоначально, необходимо выполнить несколько базовых настроек плагина для того, чтобы начать работать с такими сетками:

Susy + Breakpoint

Эта статья является третьей частью из серии руководства по плагину Susy 2. Если вы впервые познакомились с плагином Susy 2, то рекомендую начать его изучение с первой статьи - “Краткое руководство по Susy 2”.

Настройка Susy 2 для работы с фиксированной шириной

Для того, чтобы начать работать с фиксированной шириной элементов в плагине Susy 2, необходимо изменить значение одного из его параметров c

1
math: fluid
на
1
math: static
. Также необходимо задать ширину колонки через параметр
1
column-width
, для этого подойдут единицы измерения
1
px
,
1
em
или
1
rem
. В примере этой статьи будут использоваться пиксели (
1
px
).

Если планируется создавать адаптивную сетку, то значением параметра

1
column
необходимо установить число колонок при самом маленьком размере окна браузера.

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

compass create -r susy -u susy susy_static

Затем откроем файл

1
_grids.scss
и добавим в него несколько следующих строк:

$susy: (
  math: static,
  columns: 4,
  column-width: 60px,
  gutters: 1/4,
  use-custom: (rem: true)
);

Создаем в Susy 2 статическую сетку

Шаги по созданию сетки с помощью плагина Susy 2 точно такие же, как если бы создавалась адаптивная сетка (по умолчанию). Первое, что необходимо сделать, это создать блок с классом

1
.container
. Однако, при этом не стоит забывать, что для статической сетки миксину
1
container
нужно передать аргумент в виде карты
1
map
через параметр
1
$susy
.

Когда плагин Susy 2 переключен в режим работы с фиксированной шириной сетки, ширина блока-обертки устанавливается в соотвествии с шириной колонки (

1
column-width
), число колонок (
1
columns
) и ширина gutter (
1
gutters
) также передаются в виде фиксированных величин. (Прим. переводчика: можно сказать немного по другому; все эти параметры с их значениями передаются миксину
1
container
через переменную
1
$susy
):

@import "grids";

.wrapper{
  @include container($susy);
}

Плагин Susy 2 автоматически высчитает максимальную ширину сетки. Скомпилированный CSS-вид будет выглядет следующим образом:

.wrapper {
  width: 285px;
  margin-left: auto;
  margin-right: auto;
}
.wrapper:after {
  content: " ";
  display: block;
  clear: both;
}

Единственное различие между статической и адаптивной сеткой заключается в том, в плагин Susy 2 расчитывает максимальную ширину блока-контейнера, в то время как в адаптивной сетке максимальная ширина всегда принимается равной 100%.

Преобразование статической сетки в адаптивную в Susy 2

Создание адаптивной сетки с помощью плагина Susy 2 в режиме статической сетки практически ничем не отличается от того, как это можно делать в адаптивном режиме. За исключением того, что вы уже догадались, это блок-обертка. В данной статье я затрону только изменение самого блока-контейнера. Если необходима более подробная информация об остальных моментах, вернитесь назад, к статье “Краткое введение в Susy 2 (Часть 2)”.

При создании адаптивной сетки ее ширина всегда равна 100%. Поэтому нет необходимости явно ее задавать. Но в данном случае мы все-таки это сделаем.

К счастью, проблем с этим в плагине Susy 2 нет. Ниже показан наилучший метод, который можно только представить.

.wrapper{
    @include breakpoint(600px){
    @include container(12)
  }
}

.wrapper{
    @include breakpoint(900px){
    @include container(16)
  }
}

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

Скомпилированный CSS-код будет таким:

@media (min-width: 900px) {

  .wrapper {
    width: 1185px;
    margin-left: auto;
    margin-right: auto;
  }

  .wrapper:after {
    content: " ";
    display: block;
    clear: both;
  }
}

Все работает, но выглядит досаточно неприглядно. Имеются дополнительные

1
margin-left
и
1
margin-right
, а также
1
clearfix
; это происходит потому, что блок-обертка был переопределен.

На этом серия статей по Susy 2 завершена.


Решил написать небольшой обзор по online-инструменту для front-end’щика под названием SassMeister.

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

Итак, что это за инструмент? Если сказать кратко - это online-редактор для кода, наподобие известного CodePen, который уже описывался на страницах данного блога - “Площадка для тестирования CodePen”. Другими словами, SassMeister является площадкой для тестирования (playground) для людей, связанный с веб-разработкой.

Различие между CodePen и SassMeister

Также, как и CodePen, данный редактор предназначен исключительно для front-end разработчиков, так как понимает только два языка - HTML и CSS. А также всевозможные препроцессоры к этой паре языков. Как и CodePen, SassMeister позволяет сохранять созданный в нем код и делать еще пару вещей.

Но в чем же тогда отличие SassMeister от CodePen, что заставило упомянуть этот

1
playground
? Отличие есть и оно существенное. Площадка CodePen - это универсальный инструмент для веб-разработчика. В нем есть все необходимое для работы - зарегистрировался, открыл и работай!

SassMeister - это площадка, созданная исключительно для работы с препроцессором Sass и его библиотеками. Получается, что у последнего специализация более узкая; за счет этого SassMeister выполняет свою задачу лучше, чем CodePen.

Итак, в двух словах. Вам нужен хороший универсальный инструмент front-end разработки? Это CodePen. Вам нужен хороший инструмент для работы только с препроцессором Sass? Это SassMeister.

Давайте попробуем создать пример кода в этом инструменте и на его примере поймем, как с ним работать. Итак, открываем главную страницу SassMeister - SassMeister и видим основное окно с вкладками вверху. (Сразу стоит сказать, что редактор SassMeister имеет тесную интеграцию с сервисом GitHub, поэтому зайти в редактор можно, используя учетную запись последнего.) Самая главная и нужная среди них - вкладка с настройками редактора, которая называется Control Panel.

Панель управления SassMeister

Открываем ее и разберемся с ней:

Панель управления редактора SassMeister

Во-первых, надпись “Sass” не дает нам забыть о том, что мы собираемся работать с препроцессором Sass (это типа шутки).

Вторая строка “Compiler” с тремя переключателями позволяет выбрать, какую версию препроцессора Sass мы хотим использовать: свежую 3.3.6, более раннюю 3.2.19 или же LibSass (портированный на С препроцессор Sass).

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

Отлично, идем дальше!

Опускаем взгляд еще ниже на окно с заголовком “Extensions” и останавливаемся, затаив дыхание. Да-да, вы не ошиблись! Это именно то, о чем вы подумали! Это список плагинов на выбор, которые можно подключить в наш проект один щелчком мыши.

А теперь напомните мне, с каким списком расширений под Sass может работать CodePen? Не помните? Я подскажу - с двумя! Это Compass и Bourbon.

Конечно, в CodePen можно подключить на выбор не один препроцессор, а несколько - Sass, LESS, Stylus. Но вот с выбором плагинов под эти препроцессоры будет слабовато. В этом и заключается преимущество SassMeister - он делает одну вещь, но делает ее хорошо, основательно, до конца!

ОК, для нашего примера работы в SassMeister выберем из этого списка три расширения: Breakpoint, Compass, Susy. Это делается одинарным щелчком мыши на названии расширения, как будто это простая ссылка на веб-странице. Выбранное расширение автоматически добавляется в проект строкой:

@import "breakpoint";
@import "compass";
@import "susy";

Четвертая строка “CSS” предлагает опции, с которыми внимательный читатель уже должен быть знаком. Это стандартные опции компилирования препроцессора Sass из SCSS-кода в CSS-код. Точно такие же настройки имеются в конфигурационном файле

1
config.rb
любого Sass/Compass-проекта.

Пятая строка “HTML” предлагает выбрать способ, которым мы будем писать код HTML. Это будет или чистый HTML, или же с помощью HTML-препроцессоров: Haml, Markdown, Textile, Jade.

В строке Editor можно выбрать визуальную тему оформления для редактора SassMeister. Допустим, выберу для себя тему Monokai, так как люблю работать с редактором Sublime Text (здесь нет темы Twilight, а то бы однозначно выбрал ее).

Чекбоксы “Enable Emmet support” и “Use Vim keybindings” предназначены для любителей работать с плагином Emmet под Sublime Text и совсем крутых парней, которые предпочитают стиль редактора Vim.

Вот и все настройки одновременно с обзором возможностей редактора SassMeister. Пора переходить к написанию кода. Для этого закрываем Control Panel и щелкаем мышью на вкладках CSS и HTML вверху. Добавятся еще два окошка CSS и HTML, соответственно. Накидаем в окне HTML совсем простенький код, немного оформим его в окне SCSS, проверим скомпилированный результат в окне CSS и полюбуемся на творение рук своих в четвертом, самом нижнем окне визуального предпросмотра:

Результат работы в редакторе SassMeister

Сохранение кода в SassMeister через GitHub Gist

Отлично! Мы успешно справились с задачей и создали великолепный образец кода в SassMeister. Теперь осталось самое малое - сохранить на века этот образец, чтобы потомки смогли восхищаться им. Нетрудно догадаться, что для этой цели служит вкладка в виде облачка. Наводим на нее мышь и видим надписи - “Save Gist” и Reset. Напрягаем все извилины своего мозга и щелкаем мышью по ссылке “Save Gist”. Редактор SassMeister радостно (зелененькой надписью) сообщает, что наш “Gist is saved”.

А что такое Gist и где оказался наш кусочек кода (куда он сохранился)? Еще раз наводим мышь на облачко и видим, что вкладочка то поменялась! Вместо двух там теперь появилось еще несколько ссылок: “Update Gist”, “View on GitHub”, “Fork Gist”, наша старая знакомая Reset. Вау, знакомые слова - GitHub, Fork! А давайте пройдем по ссылочке “View on GitHub”?

Сохраненный код с SassMeister на сервисе GitHub Gist

Ну конечно же! Мы оказались на GitHub, а точнее - на его сервисе Gist. Кто не знаком с этим сервисом, может уже догадаться о его предназначении. Он служит для хранения таких вот (и не обязательно именно таких) кусочков кода (snippets). Более того, у сервиса Gist имеется интеграция через плагин с редактором Sublime Text, которая позволяет буквально по волшебству вставлять код из Gist прямо в ST!

После сохранения кода на GitHub Gist в панели SassMeister появляется еще одна вкладочка - стрелка. Назначение ее предельно понятно - с помощью нее можно встраивать (embed) созданный здесь код в другой проект, в виде объекта.

SassMeister - заключение

Вот, в принципе, и все, что можно рассказать об online-редакторе SassMeister. Единственный момент, с которым я не разобрался, это вкладка Bookmark - для чего она нужна и как с ней работать, в чем прикол ее существования в этом редакторе. Может быть, внимательный читатель подскажет, для чего она нужна?

Думаю, для кодеров, которые любят и активно используют препроцессор Sass совместно с великолепной библиотекой Compass и плагинами в ней, площадка для тестирования SassMeister понравиться однозначно!