В этой статье будет рассмотрен вопрос установки локального сервера XAMPP под операционной системой Linux Mint 17.

Почему этот локальный сервер и, тем более, почему именно Linux? Ответы просты - для меня лично сервер XAMPP является наиболее интуитивно понятным. А Linux - потому что в ней мне более удобно кодить на HTML&CSS, нежели под Windows.

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

С преимуществами работы кодера под Linux разобрались - осталось установить и настроить локальный сервер под эту операционную систему. В этом вопросе нет ничего сложного и есть даже локализованная версия инструкции на официальном сайте Apache Friends -FAQ Linux. В этой статье я постараюсь дать более подробное описание этого процесса, с картинками.

Локальный сервер под Linux выполнен в виде пошагового графического инсталлятора наподобие того, как это делается под Windows. С одной стороны это несколько непривычно для Linux; но с другой стороны так можно быстро и легко установить пакет для новичков в этой операционной системе.

Пакет инсталляции XAMPP под Linux Mint

Скачиваем пакет инсталлятора по ссылке Download официального сайта “Apache Friends”. При этом определяемся, под 32 или 64-битную систему необходим пакет - такой и выбираем. Помимо этого есть две версии пакета - стабильный 1.8.2/PHP 5.4.27 и более новый 1.8.3/PHP 5.5.11.

Мною был выбран пакет 1.8.2/PHP 5.4.27 (именно из-за его стабильности) версии 64-бита, под операционную систему Linux Mint 17 “Qiana” Cinnamon 64-bit.

После скачивания пакета открываю директорию “Downloads” (туда попадают все скачиваемые под Linux файлы) в терминале. Команда ls показывает мне содержимое этой директории - и файл xampp-linux-x64-1.8.2-5-installer.run в частности.

В этом же терминале делаю этот файл исполняемым:

$ sudo chmod 755 xampp-linux-x64-1.8.2-5-installer.run

… затем запускаю файл xampp-linux-x64-1.8.2-5-installer.run на выполнение командой:

$ sudo ./xampp-linux-x64-1.8.2-5-installer.run

Инсталляция XAMPP под Linux Mint

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

Сервер будет установлен в директорию /opt/lampp:

Запуск установки XAMPP

Выбор компонентов установки XAMPP

Директория установки XAMPP

В этом шаге необходимо убрать галочку в строке “Learn more about Bitnami for XAMPP”:

Приложение Bitnami под XAMPP

Установка начата

Процесс инсталляции

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

Завершение установки XAMPP

Запуск и остановка XAMPP под Linux Mint

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

cd /opt/lampp
sudo ./manager-linux-x64.run

Приложение для управления XAMPP

Переходим в этом приложении на вкладку “Manage Servers” и видим список служб локального сервера. Напротив каждой службы в виде лампочки показан ее статус - запущена она (Running) или остановлена (Stopped).

Управление сервисами в XAMPP

Первоначально запущен только локальный сервер Apache; база данных “MySQL Database” и FTP-сервер “ProFTPD” остановлены. Их можно запустить из данного приложения, просто нажав кнопку “Start”, но я поступлю более Linux-way и воспользуюсь терминалом. Для этого я введу в нем всего одну комадну:

$ sudo /opt/lampp/lampp start

Если все пройдет успешно, то в терминале будет следующий вывод:

Starting XAMPP for Linux 1.8.2-5...
  XAMPP: Starting Apache...ok.
  XAMPP: Starting MySQL...ok.
  XAMPP: Starting ProFTPD...ok.

… что можно проверить и в приложении:

Запуск всех сервисов в XAMPP

Остановить локальный сервер можно также из терминала командой:

$ sudo /opt/lampp/lampp stop
...
Stopping XAMPP for Linux 1.8.2-5...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...ok.

Установка WordPress под XAMPP в Linux Mint

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

Переходим к заключительной части данной статьи и рассмотрим вопрос установки CMS WordPress под XAMPP в Linux Mint. Все виртуальные сервера располагаются в директории /opt/lampp/htdocs/.

То есть, если необходимо создать отдельный экземпляр какой-либо CMS (Joomla, WordPress, Drupal и так далее), то нужно просто создать поддиректорию в директории htdocs и распаковать туда нужную CMS. В моем случае такой CMS будет WordPress-3.9.1.

Создаю поддиректорию travel командой:

$ sudo mkdir -p /opt/lampp/htdocs/travel

… и распаковываю в нее скачанный архив WordPress с помощью незаменимой консольной программы mc (не забудьте запустить ее через sudo, иначе получите ошибку прав доступа):

Распаковка WordPress в XAMPP

После распаковки WordPress приступим к его установке. Создадим вручную конфигурационный файл wp-config.php чтобы избежать ошибки прав доступа при обычной пошаговой инсталляции WordPress (не забываем, что мы находимся под Linux!). Для этого скопируем файл-шаблон wp-config-sample.php в ту же директорию под именем wp-config.php:

$ sudo cp /opt/lampp/htdocs/travel/wp-config-sample.php /opt/lampp/htdocs/travel/wp-config.php

… и отредактируем его через редактор nano:

$ sudo nano -w /opt/lampp/htdocs/travel/wp-config.php

Затем в адресной строке браузера введем (XAMPP у нас все еще запущен, не забываем об этом!):

http://localhost/phpmyadmin

… и в приложении phpMyAdmin создаем базу данных под наш будущий локальный сайт, на котором будет “крутиться” WordPress. Перезапускаем локальный сервер, чтобы он “подхватил” изменения в базе данных MySQL и создание виртульного сервера travel в директории htdocs:

$ sudo /opt/lampp/lampp restart
...
Restarting XAMPP for Linux 1.8.2-5...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...ok.
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.

В браузере в адресной строке запускаем установку WordPress:

http://localhost/travel

… далее проходим оставшиеся стандартные шаги инсталляции WordPress и получаем готовый локальный сайт - переходим на него по адресу:

http://localhost/travel

На этом установка CMS WordPress под локальный сервер успешно завершена. А также успешно выполнена рассмотренная выше инсталляция локального сервера под операционной системой Linux Mint 17 “Qiana” Cinnamon 64-bit.

Заключение

Итог выполненных выше шагов - возможность иметь всегда “под рукой” готовый к работе локальный сервер. Еще один плюс к удобству кодинга под Linux. А кодинг под Linux субъективно для меня удобнее кодинга под Windows.

Стоит также сказать, что при установке и настройке могут возникнуть проблемы. В частности, автором данной статьи первоначально производилась установка “чистого” LAMPP, которая потом была удалена. И, хотя деинсталляция была произведена правильно, последующая установка XAMPP привела к тому, что данный сервер не запускался на компьютере.

На этом все.


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

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

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

Первоначальная настройка проекта Compass

Для начала создадим пустойй проект Compass и настроим его. Инициализируем несколько переменных $color и $color1, которым определим цвет. Эти переменные понадобятся нам в дальнейшем.

@import "compass/reset";

$color: hsla(120,100%,50%,.5);
$color1: hsla(240,100%,50%,.5);
$unit: 180px;

div{
  height: $unit;
  width: $unit;
  border: 1px solid #000;
  margin: 10px;
  float: left;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  color: darken($color,80%);
  line-height: $unit;
}
.origin{
  background-color: $color;
}

Фунции lighten и darken

Начнем с самых простых функций - lighten и darken. Кто маломальски знаком с английским языком, должен сам догадаться о их предназначении. Функция lighten осветляет исходный цвет, а функция darken затемняет его.

Синтаксис функций lighten и darken одинаков. Первым аргументом задается начальное значение цвета - передадим его функции в виде переменной $color. Вторым аргументом является значение в процентах, на которое нужно осветлить или затемнить исходный цвет:

.lighten{
  background-color: lighten($color,10%);
}

.darken{
  background-color: darken($color,10%);
}

Функции lighten и darken

Функции lighten и darken могут использоваться в любом месте SCSS-кода - везде, где применяется цвет. Например, видоизменим показанный выше пример. Применим функции lighten и darken для изменения цвета шрифта, границы и фона:

.mixin{
  font-size: .95rem;
  background-color: lighten($color,20%);
  border: 1px solid darken($color,30%);
  color: darken($color,60%);
}

Функции lighten и darken для цвета шрифта и границы

Функции complement и invert

Переходим к функциям обратного преобразования цвета. Первая функция complement преобразует исходный цвет на прямо противоположный. Допустим, у нас имеется переменная $color c заданным в ней цветом. Передадим эту переменную функции complement в качестве аргумента:

.complement{
  background-color: complement($color);
}

В результате на выходе получим цвет, расположенный на 180 градусов по отношению к исходному цвету. Чтобы было понятнее, посмотрим на “HSLA wheel”:

HSLA wheel

Исходным цветом у нас является hsla(120,100%,50%,.5). На 180 градусов по отношению к исходному цвету расположен hsla(300,100%,50%,.5), иначе называемый Magenta. Вот его и получаем от функции complement.

Функция invert практичеси аналогична функции complement. Она также производит инвертирование цвета от исходного. Но функция invert отличается от функции complement тем, что с помощью нее производится инвертирование цветов (красного, зеленого, синего), но прозрачность opacity остается неизменной.

.invert{
  background-color: invert($color);
}

Функции complement и invert

Функция adjust-hue

Функция adjust-hue практически аналогична функции complement - она инвертирует исходный цвет. Но в отличие от последней обладает большей гибкостью. Если функция complement возвращает цвет, расположенный точно на 180 градусов от исходного (противоположный), то функция adjust-hue может управлять градусом расположения “выходного цвета.”

Другими словами, можно задать угол, отличный от 180 градусов. Кроме того, значение угла может быть как положительным, так и отрицательным:

.adjusthue_plus{
  background-color: adjust-hue($color,80deg);
}

.adjusthue_minus{
  background-color: adjust-hue($color,-80deg);
}

Функция adjust-hue

Функции saturate и desaturate

В препроцессоре Sass имеется пара функций для управления насыщеностью цвета.

Функция saturate():

.saturate{
  background-color: saturate($color,80%);
}

… увеличивает насыщенность цвета от исходного.

А функция desaturate():

.desaturate{
  background-color: desaturate($color,80%);
}

… наоборот, уменьшает насыщенность цвета от исходного.

Функции saturate и desaturate

Функции transparentize и fade-out

Функция transparentize добавляет к исходному цвету альфа-канал и, тем самым, управляет прозрачностью исходного цвета. Особая прелесть этой функции заключается в том, что даже если исходный цвет не имеет альфа-канала, то на выходе к этому цвету будет добавлен альфа-канал с заданым уровнем прозрачности. То есть, будет выполнено преобразование в формат RGBA.

Значение прозрачности может находиться в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный):

.transparentize{
  background-color: transparentize($color,.2);
}

Функция fade-out аналогична функции transparentize:

.fadeout{
  background-color: fade-out($color,.2);
}

Функции transparentize и fade-out

Функции opacify и fade-in

Функции opacify и fade-in являются прямой противоположностью функций transparentize и fade-out. В помощью этих функций цвет делается менее прозрачным:

.opacify{
  background-color: opacify($color,.3);
}

.fadein{
  background-color: fade-in($color,.3);
}

Функции opacify и fade-in

Функция grayscale

Функция преобразования исходного цвета в оттенки серого чрезвычайно проста в использовании. В принципе, тут и рассказывать особенно нечего:

.grayscale{
  background-color: grayscale($color);
}

Функция grayscale

Функция rgba

Если стоит задача преобразования исходного цвета (заданного в виде переменной, в формате HEX или HSLA) в формат RGBA, в этом случае на помощь придет функция rgba. При этом к выходному цвету добавляется альфа-канал для задания прозрачности цвета:

.rgba{
  background-color: rgba($color,.2);
}

Функция rgba

С практической точки зрения функция rgba равносильна функции transparentize/fade-out или opacify/fade-in.

Функция mix

В препроцессоре Sass имеется функция смешивания цветов для получения на выходе одного, результирующего цвета. Другими словами, у нас имеются два цвета, представленные переменными $color и $color1. C помощью функции mix можно смешать эти два цвета в определенной пропорции, чтобы получить на выходе один результирующий цвет.

.mix{
  background-color: mix($color,$color1,70%);
}

В показанном выше примере у функции mix имеются два аргумента в виде переменных (два цвета). Последний третий аргумент в виде процентов задает пропорцию, в которой один цвет будет смешан с другим. В нашем случае цвет $color смешан с цветом $color1 в пропорции - 70% от первого цвета $color добавляется ко второму цвету $color1.

Функция mix

Функция adjust-color

Вот мы и подошли к более сложным функциям препроцессора Sass. Первой из таких функций является adjust-color, c помощью которой можно управлять любым значением цвета - красным, зеленым, синим (для цветовой модели RGB) или же цветом, насыщеностью и светлотой (для цветовой модели HSL). Функции adjust-color также доступно управление альфа-каналом (прозрачностью) цвета.

Функция adjust-color достаточно сложная, но с помощью нее можно управлять практически всем, что относится к цвету в SCSS-коде. Давайте последовательно разберемся во всех ее возможностях.

Каждому цвету в этой функции соответствует одноименный аргумент:

  • $red, $green, $blue - значения красного, зеленого и синего цветов в диапазоне от 0 до 255;
  • $hue - значение от 0 до 359 градусов, обозначающих цвет на HSL-диаграме; значение может быть как положительным, так и отрицательным;
  • $saturation, $lightness - значения насыщенности и светлоты для цветовой модели HSL; находятся в диапазоне от 0 до 100%; могут быть отрицательными или положительными;
  • $alpha - значение альфа-канала в диапазоне от 0 до 1.

Хватит теории, давайте рассмотрим работу функции adjust-color на примерах.

  1. Изменение цвета от исходного $color для цветовой модели HSLA. Первым аргументом передается цвет в виде переменной $color; вторым аргументом задается изменение цвета через переменную $hue:
.adjustColorHue{
  background-color: adjust-color($color,$hue:40);
}

Функция adjust-color с аргументом $hue

  1. Изменение цвета и светлоты одновременно. Первым аргументом $color задается исходный цвет, вторым аргументом устанавливается цвет $hue, третьим аргументом задается изменение светлоты $lightness:
.adjustColorHueLightness{
  background-color: adjust-color($color,$hue:40,$lightness:30);
}

Функция adjust-color с аргументом $hue и $lightness

  1. Изменение двух каналов цвета одновременно для цветовой модели RGB. Функции adjust-color передаются три аргумента: исходный цвет $color, канал красного цвета $red, канал зеленого цвета $green:
.adjustColorRedGreen{
  background-color: adjust-color($color,$red:40,$green:30);
}

Функция adjust-color с аргументом $red и $green

  1. Смешивание аргументов цветовых моделей RGB и HSL в функции adjust-color. Передадим функции adjust-color аргументы исходного цвета $color, аргумент красного канала $red модели RGB и аргумент $hue модели HSL:
.adjustColorError{
  background-color: adjust-color($color,$red:40,$hue:20);
}

В результате компиляции данного кода в CSS получим такую ошибку:

Syntax error: Cannot specify HSL and RGB values for a color at the same time for `adjust-color
on line 38 of .../sass/style.scss

… которая говорит о том, что в функции adjust-color недопустимо смешивание аргументов разных цветовых моделей - RGB и HSL.

Поэтому нужно быть внимательным при работе с функцией adjust-color и не допускать одновременной передачи функции аргументов разных цветовых моделей RGB и HSL.

Функция scale-color

Рассмотренная выше функция adjust-color производила изменение цвета на основе занчений передаваемых ей аргументов. Функция scale-color работает несколько иначе - она изменяет цвет на основе исходного цвета. Чтобы было сразу понятно, о чем идет речь, давайте рассмотрим несколько примеров:

.origin{
  background-color: $color;
}

.adjustcolor{
  background-color: adjust-color($color,$lightness:-20%);
}

.scalecolor{
  background-color: scale-color($color,$lightness:-20%);
}

Разница между функциями adjust-color и scale-color

В данном примере функция adjust-color берет за основу цвет в переменной $color и делает его светлее на фиксированные 20%. Функция scale-color, c другой стороны, поступает несколько иначе. Ею строиться шкала светлоты от 1 до 100%, в которой 1 соответствует светлоте цвета, заданной в переменной $color. Значение 100% соответствует полной прозрачности. И на основе этой шкалы функция scale-color вычисляет светлоту в 20%.

Неудивительно, что в показанном выше примере результат функции scale-color оказался светлее, чем результат функции adjust-color.

Функции shade и tint

Фреймворк Сompass также, как и препроцессор Sass, имеет в своем составе некоторое количество функций для работы с цветом. Наиболее интересными среди них могу показаться две функции - shade и tint.

Функция shade выполняет смешивание заданного цвета с черным цветом в указанной пропорции. Пропорция указывется в процентах от черного цвета:

.shade{
  background-color: shade($color,40%);
}

Результат работы функции shade

Функция tint, напротив, выполняет смешивание исходного цвета с белым цветом в заданном соотношении. Код ниже создаст цвет на основе смешения цвета в переменной $color и 30% белого цвета:

.tint{
  background-color: tint($color,30%);
}

Результат работы функции tint

Заключение

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

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

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

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


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

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

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

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

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

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

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

Миксин hide-text

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

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

@include hide-text([$direction])

… где необязательный аргумент $direction определяет направление скрытия текста.

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

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

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

Подключим к вышеприведенному коду миксин hide-text и посмотрим на результат:

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

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

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

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

Миксин squish-text

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

Синтаксис миксина squish-text таков:

@include squish-text;

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

 class="squishtext">
 Mixin squish-text
...
.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;
}

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

Подключим миксин squish-text и посмотрим на результат его работы:

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

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

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

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

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

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

 class="squish">Lorem ipsum dolor sit amet, class="squish-text"> consectetur adipisicing elit, 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  class="squish-text">in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  class="squish-text">cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.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 имеется миксин с говорящим названием replace-text-with-dimensions:

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

Проиллюстрируем применение миксина replace-text-with-dimensions:

 class="replace_dimensions">
 replace-text-with-dimensions

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

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

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

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

Мне кажется, было бы очень любопытно взглянуть на результирующий код компиляции в CSS. Видим, что на изображение указывает корректная ссылка; а также, что у изображения установлены правильные ширина (width) и высота (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

… и настраиваем конфигурационный файл 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-макета. В данном примере этот процесс будет заменен на более быстрый и красивый. Мы воспользуемся готовым бесплатным набором иконок, который скачаем из бескрайних просторов Интернета.

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

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

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

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

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

img/webicons

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

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

@import "webicons/*.png";

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

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

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

@include all-webicons-sprites;

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

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

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

Значение его имеет правильный относительный путь - ../img/..., это сработала переменная relative_assets = true в конфигурационном файле 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 в горизонтальный список, воспользовавшись миксином horizontal-list($padding, $direction). Аргумент $direction опустим за ненадобностью, а в качестве аргумента $padding передадим отступ, равный переменной:

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

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

Можно воспользоваться готовыми именами классов, созданными библиотекой Compass. То есть, открыть (в нашем случае) файл style.css, взять оттуда нужные имена классов (.webicons-agenda, .webicons-arrow-down, .webicons-arrow-left-down, .webicons-arrow-left-up, …) и добавить их в HTML-разметку.

Но такой способ будет не совсем правильным, так как HTML-разметка будет “загрязнена” избыточными именами классов. Когда как можно легко избежать этого недостатка, применив директиву @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 может помощь в этом случае и легко решить поставленную задачу.

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

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

  $webicons-layout: vertical;

По умолчанию в переменной [folder-name]-layout используется значение vertical:

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

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

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

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

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

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

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

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

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

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

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

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

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

В имени этой переменной folder-name - это имя каталога с расположенными в нем изображениями. В нашем случае имя каталога webicons, поэтому имя переменной будет - $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 автоматически были “отображены” в файле .css размеры каждого изображения. Входящего в состав этого спрайта.

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

...

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

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

Но при включении переменной [folder-name]-sprite-dimensions: true; (по умолчанию ее значение равно 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, вместо 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 вывести список пакетов (gem), содержащих в своем имени слово sass; ключ -a скажет Ruby, что нужно вывести список всех (all) пакетов; ключ -r скажет Ruby, что этот список нужно получить удаленно, из репозитория.

Для Compass команда будет выглядеть аналогично, за исключением ключевого слова 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 есть фичи, которые необходимы вам на данный момент, то можно установить 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

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

На этом все.