Так как в 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

1

all

1

-r

Для 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

На этом все.

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

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

Эта статья является третьей частью из серии руководства по плагину 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

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

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

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

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

Панель управления 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

Пятая строка “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 через 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”?

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

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

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

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

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

В предыдущей статье были рассмотрены краткие основы плагина Susy 2 и на примере создана с помощью Susy довольно сложная HTML-разметка.

В этой статье будет углубленное изучение плагина Susy 2. Сегодня предстоит изучить вопрос, каким образом можно легко и быстро создавать RWD (Responsive Web Design) с помощью Susy 2.

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

Контрольные точки (breakpoints)

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

1

breakpoints

1

media-queries

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

Прим. переводчика - имеется отдельная статья по установке и работе с плагином Breakpoint в Sass, расположенная по этому адресу - Медиа-запросы Breakpoint в Sass.

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

sudo gem install compass
sudo gem install breakpoint

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

Затем необходимо подключить плагин Breakpoint в конфигурационном файле

1

config.rb

1

style.scss

// config.rb
# Require any additional compass plugins here.

require 'susy'
require 'breakpoint'

// style.scss
@import "compass/reset";
@import "susy";
@import "breakpoint";

Теперь все готово для того, чтобы двигаться дальше.

Работаем с плагином Breakpoint

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

Для того, чтобы воспользоваться плагином Breakpoint, необходимо вызвать одноименный миксин и вставить его в код, передав требуемые аргументы. Эти аргументы преобразуются плагином Breakpoint в соответствующие медиа-запросы. Общий синтаксис миксина таков:

@include breakpoint(<args>){
  // content
}

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

1

mobile-first

1

min-width

.container{
  @include breakpoint(1200px){
    // content
  }
}

… что при компиляции в CSS-код даст результат:

@media (min-width: 1200px){
  .container{
    // content
  }
}

Миксин Breakpoint очень гибкий и с помощью него при необходимости можно создавать сложные медиа-запросы.

Использование Breakpoint совместно с Susy 2

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

1

breakpoint

Прим. переводчика - все в точности с принципом MobileFirst.

Для того, чтобы осуществить такую задачу, достаточно просто добавить нужную контрольную точку

1

breakpoint

В конкретном случае это будет выглядеть таким образом:

.column_1,.column_3{
  ...
  @include breakpoint(900px){
    @include span(2 of 10);
  }
}
.column_3{
  @include breakpoint(900px){
    @include last;
  }
}
...
.column_2{
  ...
  @include breakpoint(900px){
    @include span(6 of 10);
    @include clearfix;
    .column_2_1_1,.column_2_1_2{
      @include span(3 of 6);
    }
    .column_2_1_2{
      @include last;
    }
    .column_2_2_1{
      @include span(2 of 6);
    }
    .column_2_2_2{
      @include span(4 of 6 last);
      @include clearfix;
      .column_2_3_1,.column_2_3_2{
        @include span(2 of 4);
      }
      .column_2_3_2{
        @include last;
      }
      .column_2_4{
        @include span(full);
        clear: both;
      }
    }
  }

То есть, для контрольной точки

1

min-width: 900px

Готовый пример переработанного кода можно посмотреть здесь - Susy 2 + Breakpoint.

Все выглядит достаточно просто и работает нормально. Но что, если требуется решить чуть более сложную задачу?

Примечание автора: Если вам не нравиться использовать контрольные точки с помощью плагина Breakpoint, вы можете свободно применять старые добрые медиа-запросы

1	media queries

, как это делается в CSS.

Добавляем несколько контрольных точек в Susy 2

Допустим, стоит задача создать еще одно состояние шаблона, промежуточное между состоянием “Mobile View” и состоянием “Desktop View”. Необходимо, чтобы при переходе от мобильного экрана к экрану монитора появилось еще одно состояние для планшетных компьютеров “Tablet View”, с отдельной информационной колонкой справа:

Этот случай выглядит немного сложнее, чем предыдущий. Главным образом потому, что блок

1

column_1

Немного проанализируем будущий шаблон Tablet View для планшетного дизайна. В нем блоки

1

column_1

1

column_3

1

column_2

1

column_1

1

column_3

Вся хитрость заключается в миксине

1

last

Давайте взглянем на готовый SCSS-код и сразу многое станет понятно:

/* Tablet View
----------------------------*/
.column_1,.column_3{
  @include breakpoint(600px){
    @include span(2 of 6 last);
  }
}
.column_2{
  @include breakpoint(600px){
    @include span(4 of 6);
    @include clearfix;
    .column_2_1_1,.column_2_1_2{
      @include span(3 of 6);
    }
    .column_2_1_2{
      @include last;
    }
    .column_2_2_1, .column_2_2_2, .column_2_4{
      @include span(full);
    }
    .column_2_2_2{
      @include clearfix;
      .column_2_3_1,.column_2_3_2{
        @include span(2 of 4);
      }
      .column_2_3_2{
        @include last;
      }
      .column_2_4{
        clear: both;
      }
    }
  }
}

Обратите внимание, что для блоков

1

.column_1

1

.column_3

1

last

1

margin

@media (min-width: 600px) {
  .container .column_1, .container .column_3 {
    width: 31.03448%;
    float: right;
    margin-right: 0;
  }
}

В то же время, для блока

1

.column_2

@media (min-width: 600px) {
  .container .column_2 {
    width: 65.51724%;
    float: left;
    margin-right: 3.44828%;
    overflow: hidden;
    *zoom: 1;
  }

В блоке

1

.column_2

1

.column_2_2_1

1

.column_2_2_2

1

.column_2_4

Полный код получившегося примера можно посмотреть здесь - Susy 2 + Breakpoint = Mobile View + Tablet View + Desktop View.

Миксин Susy-Breakpoint

Плагин Susy 2 имеет в своем составе дополнительный миксин

1

susy-breakpoint

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

1

susy-breakpoint

// C использованием миксина susy-breakpoint
.column_1,.column_3{
  @include susy-breakpoint(600px,6){
    @include span(2 last);
  }
}

// Без использования миксина susy-breakpoint
.column_1,.column_3{
  @include breakpoint(600px){
    @include span(2 of 6 last);
  }
}

Видим, что миксин

1

susy-breakpoint

1

breakpoint

Тогда в миксине

1

span

1

last

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

1

susy-breakpoint

.column_1,.column_3{
  @include susy-breakpoint(600px,6){
    @include span(2 last);
  }
}

.column_2{
  @include susy-breakpoint(600px,6){
    @include span(4);
    @include clearfix;
    ...

@media (min-width: 600px) {
  .container .column_1, .container .column_3 {
    width: 31.03448%;
    float: right;
    margin-right: 0;
  }
}

@media (min-width: 600px) {
  .container .column_2 {
    width: 65.51724%;
    float: left;
    margin-right: 3.44828%;
    overflow: hidden;
    *zoom: 1;
  }
  ...

Лично я предпочитаю использовать первый метод, с применением плагина Breakpoint (прим. переводчика: мне он также кажется более наглядным и интуитивно понятным). Естественно, можно с одинаковым успехом пользоваться обоими сопособами. Все зависит от того, какой вам больше нравиться и легче применять на практике.

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

Ограничение блока-контейнера по ширине

Так как в этом примере используется плавающий контейнер, то ограничить его по ширине очень просто:

.container{
  @include container(1140px);
  ...

В результате будет произведено ограничение блока с классом

1

.container

.container {
  background-color: #fbeecb;
  max-width: 1140px;
  ...

Точно такого же результата можно добиться, если просто записать:

.container{
  background-color: #fbeecb;
  @include container;
  @include clearfix;
  max-width: 1140px;
  ...

.container {
  background-color: #fbeecb;
  max-width: 1140px;
  ...

К сожалению, точно также нельзя поступить в случае с CSS-сетками фиксированной ширины

1

static grid

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

Окончательный результат рассмотренного в этой статье шаблона можно посмотреть здесь - Susy + Breakpoint = Final.

Данная статья является вольным переводом и обработкой оригинала - A Complete Tutorial to Susy 2 (Part 2).

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

На момент написания статьи состоялся релиз Susy 2. Если у вас есть опыт работы с предыдущей версией этого фреймворка - Susy 1, то вам наверняка еще больше понравиться работа в Susy 2, так как эта версия предоставляет веб-разработчику еще большую гибкость.

Данное руководство по Susy 2 состоит из двух частей; в этой первой части будет показан процесс создания шаблона в фреймворке Susy 2.

Почему именно Susy 2

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

Если у вас до прочтения этой статьи был опыт работы с такими традиционными фреймворками, как Foundation или Bootstrap, то вы должны знать, что в этих фреймворках ширина колонок и контрольные точки

1

breakpoints

Фреймворк Susy лишен такого недостатка - классы создаются непосредственно под необходимый случай и применяются к конкретной сетке.

Как мне кажется, этот момент довольно трудно понять сразу, так как является достаточно абстрактным понятием. Вместо того, чтобы пытаться бесконечно объяснять теорию, мне кажется гораздо лучшим для понимания воспользоваться практическим примером. Для этого создадим с помощью Susy 2 10-колоночный тестовый макет, нарисованный Arnaud Guera (AG) для официального сайта Susy 2:

Установка Susy 2

Если Susy вообще не установлен

Фреймворк Susy для своей работы нуждается в препроцессоре Sass. Поэтому, если у вас на локальном компьютере еще не установлены как Sass, так и Susy, то необходимо это сделать:

sudo gem install sass
sudo gem install susy

Если Susy уже установлен

Если фреймворк Susy уже установлен на вашем компьютере и также имеется Ruby RVM (Ruby Version Manager), то можно произвести обновление с помощью команды:

sudo gem update

Если у вас эта команда не сработала, то это означает, что нужно попробовать другой способ или же сначала установить Ruby RVM.

Второй способ установки фреймворка Susy версии 2 несколько более “ручной”. Он предполагает, что сначала нужно деинсталлировать предыдущие версии Sass\Susy, а затем установить их снова. Этот способ является наилучшим, если необходимо избежать ошибок при обновлении (как в первом случае).

sudo gem uninstall susy
sudo gem uninstall sass

sudo gem install sass
sudo gem install susy

После успешной установки фреймворка Susy 2 на локальной машине, приступим к его базовой настройке.

Базовая настройка Susy 2

Точно также, как и в первой версии, необходимо в конфигурационном файле

1

config.rb

# Require any additional compass plugins here.
require 'susy'

Затем нужно импортировать фреймворк Susy 2 в таблицы стилей:

// Importing Susy
@import "susy";

Версия 2 фреймворка Susy имеет список глобальных переменных, встроенных в него. Эти переменные можно изменить прямо в таблице стилей:

// Configuring Susy 2 Global Defaults
  $susy: (
    key : value
);

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

Однако, можно смело использовать Susy 2 с настройками по-умолчанию. В моем случае, так как я предпочитаю работать с моделью

1

border-box

1

rem

$susy: (
  global-box-sizing: border-box,
  use-custom: (rem: true)
);

Обратите внимание на то, что Susy 2 использует по умолчанию “резиновый” шаблон. Это означает, что ширина всех внешних блоков-контейнеров задана в 100%.

Если же вы предпочитаете работать в Susy с фиксированными ширинами элементов и контрольными точками

1

breakpoints

1

math

1

static

Также обратите внимание, что необходимо подключить к текущему проекту библиотеку Compass и файл нормализации стилей

1

normalize.css

@import "normalize";
@import "compass";
@import "susy";

// Настройка переменных Susy
$susy:(
  global-box-sizing: border-box;
  use-custom: (rem: true)
);

@include border-box-sizing;

Базовый HTML и CSS для шаблона AG

HTML-каркас для данного шаблона будет выглядеть следующим образом:

<div class="container">
  <h1>
    10-колоночный шаблон с вложенностью блоков
  </h1>
  <!-- Column 1 -->
  <div class="column_1">
    <h2>
      Колонка 1
    </h2>
  </div>
  <!-- Column 2 -->
  <div class="column_2">
    <h2>
      Колонка 2
    </h2>
    <div class="column_2_1_1">
      <h2>
        Колонка 2-1-1
      </h2>
    </div>
    <div class="column_2_1_2">
      <h2>
        Колонка 2-1-2
      </h2>
    </div>
    <div class="column_2_2_1">
      <h2>
        Колонка 2-2-1
      </h2>
    </div>
    <div class="column_2_2_2">
      <h2>
        Колонка 2-2-2
      </h2>
      <div class="column_2_3_1">
        <h2>
          Колонка 2-3-1
        </h2>
      </div>
      <div class="column_2_3_2">
        <h2>
          Колонка 2-3-2
        </h2>
      </div>
      <div class="column_2_4">
        <h2>
          Колонка 2-4
        </h2>
      </div>
    </div>
  </div>
  <!-- end Column 2 -->
  <!-- Column 3 -->
  <div class="column_3">
    <h2>
      Колонка 3
    </h2>
  </div>
</div>

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

Ниже представлен простой SCSS-код для сетки:

.container{
  background-color: #fbeecb;

  .column_1,.column_3{
    background-color: #71dad2;
  }

  .column_2{
    background-color: #fae7b3;

    .column_2_1_1,.column_2_1_2{
      background-color: #ee9e9c;
    }

    .column_2_2_1{
      background-color: #f09671;
    }

    .column_2_2_2{
      background-color: #f6d784;

      .column_2_3_1,.column_2_3_2{
        background-color: #ee9e9c;
      }

      .column_2_4{
        background-color: #ea9fc3;
      }
    }
  }

  h1,h2{
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    padding: 1.8rem 0;
  }
}

Все готово для погружения в плагин Susy. Но перед началом необходимо немного остановиться на деталях этого плагина.

Наиболее важные функции и миксины плагина Susy

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

Миксин Container

Первое, что необходимо сделать в разметке - это включить миксин

1

.container

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

@include container( [<lenght>] );

Необязательный параметр

1

lenght

1

max-width

1

max-widht: 100%

Рабочий пример миксина

1

container

@include container;

Миксин span

Миксин span является основой плагина Susy. Обычно используется стандартный способ для вызова данного миксина:

@include span( <width> [<wide / wider>] of <layout> [<last>] );

Если до этого момента вы использовали плагин Susy версии 1, то должны были обратить внимание, что синтаксис этого миксина очень похож на синтаксис миксина

1

span-column

Давайте подробно остановимся на всех тонкостях синтаксиса миксина

1

span

• 1

  width

  - количество колонок с создаваемой разметке;

• 1	wide / wider

  - необязательный параметр, который позволяет разделить колонку с помощью одного или двух gutter;

• 1

  of

  - указывает Susy, что дальше идут параметры, связанные с разметкой;

• 1

  layout

  - показывает ширину блока-обертки;

• 1

  last

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

Пример создания колонки с помощью миксина

1

span

@include span( 3 wide of 9 last);

Функция span

Функция

1

span

1

span

1

gutter

.column{
  width: span(3 of 9);
}

Прелесть использования функции

1

span

1

margin

1

padding

1

span

.paddingLeft{
  padding-left: span(1 of 9);
}

Функция gutter

Функция

1

gutter

margin-right: gutter(9);

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

Создание разметки с помощью плагина Susy

Первый шаг, который мы сделаем для превращения HTML-кода в нужную разметку, это подключим миксин

1

container

.container{
  background-color: #fbeecb;
  @include container;
  @include clearfix;
  ...

Помимо миксина

1

container

1

clearfix

1

container

max-width: 100%;
margin-left: auto;
margin-right: auto;

а миксин

1

clearfix

overflow: hidden;
*zoom: 1;

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

1	pie-clearfix

. Данный миксин построен на методе, о котором говориться в статье известного CSS-гуру Никаласа Галлахера - A new micro clearfix hack.

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

Такую HTML-разметку мы и создали ранее в этой статье. Поэтому предположим, что две боковые колонки будут у нас шириной в 2 стобца из 10, а центральная колонка - из 6 столбцов из 10 ( 10 - (2 + 2) ).

Следовательно, блок с классами

1

.column_1

1

.column_3

.column_1,.column_3{
  ...
  @include span(2 of 10);
}

Помимо этого, блоку с классом

1

.column_3

1

last

.column_3{
  @include last;
}

Если заглянем в скомпилированный CSS-код, то увидим простую картину. Всем блокам задается одинаковая ширина в процентах, правый

1

margin

1

last

1

margin

.container .column_1, .container .column_3 {
  ...
  width: 18.36735%;
  float: left;
  margin-right: 2.04082%;
}

.container .column_3 {
  float: right;
  margin-right: 0;
}

Центральная колонка должна иметь у нас ширину в шесть столбцов и плавающие блоки внутри себя, поэтому задаем для нее два миксина:

.column_2{
    ...
    @include span(6 of 10);
    @include clearfix;

… что дает в результате CSS-код:

.container .column_2 {
  ...
  width: 59.18367%;
  float: left;
  margin-right: 2.04082%;
  overflow: hidden;
  *zoom: 1;
}

Отлично! Рассмотрим далее наш пример. Внутри центральной колонки в одном ряду расположены два блока, которые в сумме занимают всю ширину блока-контейнера (в данном случае это центральная колонка). Поэтому для двух этих блоков зададим одинаковый миксин:

.column_2_1_1,.column_2_1_2{
  ...
  @include span(3 of 6);
}

… и не забудем добавить для блока с классом

1

.column_2_1_2

1

last

.column_2_1_2{
  @include last;
}

Смотрим на готовый CSS-код и видим, что ничего необычного не произошло - все предсказуемо:

.container .column_2 .column_2_1_1, .container .column_2 .column_2_1_2 {
  background-color: #ee9e9c;
  width: 48.27586%;
  float: left;
  margin-right: 3.44828%;
}
.container .column_2 .column_2_1_2 {
  float: right;
  margin-right: 0;
}

В следующем ряду располагаются еще два блока, но уже с разной шириной: блок с классом

1

.column_2_2_1

1

column_2_2_2

Кроме того, в блоке с классом

1

column_2_2_2

1

column_2_3_1

1

column_2_3_2

1

clearfix

.column_2_2_1{
  ...
  @include span(2 of 6);
}
.column_2_2_2{
  ...
  @include span(4 of 6 last);
  @include clearfix;
  .column_2_3_1,.column_2_3_2{
    ...
    @include span(2 of 4);
  }
  .column_2_3_2{
    @include last;
  }

CSS-результат применения этих миксинов показан ниже:

.column_2_2_1 {
  ...
  width: 31.03448%;
  float: left;
  margin-right: 3.44828%;
}
.column_2_2_2 {
  ...
  width: 65.51724%;
  float: right;
  margin-right: 0;
  overflow: hidden;
  *zoom: 1;
}
.column_2_3_1, .column_2_3_2 {
  ...
  width: 47.36842%;
  float: left;
  margin-right: 5.26316%;
}
.column_2_3_2 {
  float: right;
  margin-right: 0;
}

Последним у нас идет блок, который занимает всю ширину своего блока-родителя. В нему мы применим миксин

1

span(full)

1

clear: both;

.column_2_4{
  ...
  @include span(full);
  clear: both;
}

… чтобы получился CSS-результат:

.container .column_2 .column_2_2_2 .column_2_4 {
  ...
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  clear: both;
}

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

Полный вариант кода можно посмотреть здесь - Susy Part 1

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

Это вам не неуклюжие 960gs или Blueprint. Тут все гибко и настраиваемо прямо на лету. Хочешь такую разметку - пожалуйста. А хочешь другую - да пожалуйста, Susy тебе пересчитает все в мгновение ока!

Думается мне, это не последняя статья, посвященная плагину Susy под библиотеку Compass.

Данная статья является вольным переводом и осмыслением оригинала - A Complete Tutorial to Susy 2