Адаптивные спрайты при помощи SASS

В процессе разработки, не один фронт-енд разработчик сталкивался с проблемой невозможности адаптации спрайтов. Ибо, с одной стороны спрайты помогают в оптимизации страницы, но с другой они абсолютно не адаптивны, что в нынешних реалиях существенный недостаток. Для адаптации иконок мы вынуждены задавать им размеры в относительных величинах. Но в случае со спрайтами это не работает. Так как, задавая background-size и background-position в процентном отношении, за основу, логично, берется размер всей таблицы спрайтов. Что нас, естественно, ни коим образом не устраивает.

Чтож, попробуем решить эту проблему, причем двумя способами. При помощи SASS и при помощи JS/jQuery.

Начнем с первого.

Для начала, нам нужны вводные данные, а именно:

Высота и ширина таблицы спрайтов:

width: 865px;

height: 694px;

Размеры нужного нам изображения в спрайте, например:

width: 437px;

height: 56px;

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

background-position-x: -15px;

background-position-y: -365px;

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

1. Создаем блок для нашей иконки:

<div class = “our-icon”></div>

2. Пишем миксину:

Для начала, название и переменные, которые мы в нее передаем

@mixin spritesPercentage (

$spriteName,          // имя файла спрайта (без расширения)

$totalSheetWidth: 0,   // ширина самого файла спрайтов

$totalSheetHeight: 0,  // высота самого файла спрайтов

$spriteWidth: 0,       // ширина изображения в спрайте

$spriteHeight: 0,      // высота изображения в спрайте

$spritePositionX: 0,   // координаты изображения в спрайте по оси X

$spritePositionY: 0)   // координаты изображения в спрайте по оси Y

Теперь тело миксины

background: url(“../images/sprites/” + $spriteName + “.png”) no-repeat center;

  • сюда пишем путь к файлу, имя подтягивается из переменной $spriteName.

background-position-x: percentage(abs($spritePositionX) / ($totalSheetWidth – $spriteWidth));

  • здесь значение переменной $spritePositionX приводится к абсолютному и вычисляется относительное значение координаты изображения по оси Х.

background-position-y: percentage(abs($spritePositionY) / ($totalSheetHeight – $spriteHeight));

  • здесь значение переменной $spritePositionY приводится к абсолютному и вычисляется относительное значение координаты изображения по оси Y.

background-size: percentage($totalSheetWidth / $spriteWidth), percentage($totalSheetHeight / $spriteHeight);

  • Здесь вычисляются относительные значения ширины и высоты размера бекграунда.

Итого, в конечном итоге мы имеем миксину такого вида:

@mixin spritesPercentage(

$spriteName,

$totalSheetWidth: 0,

$totalSheetHeight: 0,

$spriteWidth: 0,

$spriteHeight: 0,

$spritePositionX: 0,

$spritePositionY: 0){

background: url(“../images/sprites/” + $spriteName + “.png”) no-repeat center;

background-position-x: percentage(abs($spritePositionX) / ($totalSheetWidth – $spriteWidth));

background-position-y: percentage(abs($spritePositionY) / ($totalSheetHeight – $spriteHeight));

background-size: percentage($totalSheetWidth / $spriteWidth), percentage($totalSheetHeight / $spriteHeight);

}

3. Вызываем миксину в sаss с нужными нам значениями:

.our-icon {

@include spritesPercentage (spritesheet-buttons, 424, 854, 394, 59, -15, -691);

}

4. При компиляции получаем:

.our-icon {

background: url(“../images/sprites/spritesheet-grey-buttons.png”) no-repeat center;

background-position-x: 50%;

background-position-y: 86.91824%;

background-size: 107.61421%, 1447.45763%;

}

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

При расчетах ничего не округляем, оставляем точность как есть, до стотысячных.

Все, готово.

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

Исходный размер:

Размер в два раза меньше:

Или в два раза больше:

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

В следующей части будет изложен способ использующий Java Script, что еще более упростит задачу адаптации спрайтов…