Создание надежных веб-сайтов и приложений — это не просто написание семантического HTML и модного CSS. Также важно следить за производительностью сети с самого начала ваших проектов. Есть много методов, которые могут помочь с этим, и таким образом создать лучший пользовательский опыт. Создание CSS спрайтов является одним из них. Используя эту технику, вы объединяете все свои маленькие изображения (спрайты) в большое изображение (спрайт лист) вместе с CSS, чтобы расположить его.
Вы можете создавать свои спрайты, используя различные инструменты, но в этой статье я покажу вам, как этого добиться с помощью Compass . Перед этим позвольте мне представить вам проект, который будет использоваться для этой статьи.
Настройка проекта
Чтобы лучше продемонстрировать, как работает построитель спрайтов в Compass, я создал новый проект . Вот его структура:
Compass-Sprites/
├── config.rb
├── index.html
├── stylesheets/
│ ├── ie.css
│ ├── print.css
│ └── screen.css
├── sass/
│ ├── ie.scss
│ ├── print.scss
│ └── screen.scss
└── images/
└── icons/
├── arrow-down.png
├── facebook-active.png
├── facebook-hover.png
├── facebook.png
├── twitter-active.png
├── twitter-hover.png
├── twitter.png
└── zuckerberg.png Обратите внимание, что в папке изображений есть папка с icons
Вы можете получить все файлы для этого проекта, загрузив этот zip-файл .
Базовый спрайт
Создание спрайт-листа состоит из 4 этапов:
- Импортируйте необходимые ресурсы Sass (переменные, миксины, функции) из соответствующего модуля ( Утилиты ).
- Импортируйте все изображения (спрайты), которые находятся в папке
icons - Включите миксин Sass, который будет генерировать CSS-классы для спрайтов.
- Добавьте сгенерированные классы к связанным элементам HTML.
Чтобы быть более конкретным, в файл screen.scss
@import "compass/utilities/sprites";
@import "icons/*.png";
@include all-icons-sprites;
Опять же, обратите внимание, что icons
Пока мы сохраняем и компилируем файл screen.scssimages Имя спрайт-листа будет выглядеть так:
icons-s82ea51d311.png
Его имя сохраняется в следующем соглашении: <Images_Folder_Name>-<Cache_Buster> Разрушитель кэша меняется каждый раз, когда мы обновляем спрайт. Таким образом, браузер всегда будет иметь и использовать его последнюю версию.
Первоначальный спрайт-лист нашего проекта будет выглядеть примерно так:
И вот классы CSS, которые Compass генерирует для нас:
.icons-sprite,
.icons-arrow-down,
.icons-facebook,
.icons-twitter,
.icons-zuckerberg {
background-image: url('../images/icons-s82ea51d311.png');
background-repeat: no-repeat;
}
Имена вышеприведенных классов имеют следующее соглашение: <Images_Folder_Name>-<Image_Name>
Для каждого изображения Compass применяет различные положения фона. Например, вот background-positionzuckerberg.png
.icons-zuckerberg {
background-position: 0 -232px;
}
На этом этапе мы добавляем сгенерированные классы к соответствующим элементам HTML.
Вот элемент, связанный с изображением zuckerberg.png
<h1 class="icons-zuckerberg">Mark Zuckerberg</h1>
Помните, что Compass API может генерировать спрайт-лист только для изображений PNG.
Волшебные селекторы
Compass имеет возможность создавать классы для разных состояний, используя магические селекторы спрайтов.
Например, в нашем проекте есть изображение facebook.png Допустим, мы хотим иметь разные цвета фона для изображений при hoveractive В этом случае мы добавляем изображения facebook-hover.pngfacebook-active.png Имена этих изображений должны соответствовать соглашению: <Image_Name>-<State>
После этого Compass генерирует следующие классы CSS:
.icons-facebook:hover, .icons-facebook.facebook-hover {
background-position: 0 -72px;
}
.icons-facebook:active, .icons-facebook.facebook-active {
background-position: 0 -40px;
}
Настройка сгенерированных классов
В предыдущих разделах мы видели, как Compass может генерировать классы CSS. Но что, если мы хотим настроить имена этих классов? Надеемся, что мы можем сделать это, используя <Images_Folder_Name>-sprite(Image_Name)all-<Images_Folder_Name>-sprites
Чтобы проиллюстрировать это, давайте предположим, что мы хотим изменить имя класса icons-zurckerberg В файле screen.scss
.creator {
@include icons-sprite(zuckerberg);
}
Этот класс выводится следующим образом:
<Desired_Class_Name> {
@include <Images_Folder_Name>-sprite(Image_Name);
}
И вот CSS, который создан и может быть применен к элементу, который мы хотим:
.creator {
background-position: 0 -232px;
}
Обратите внимание, что изменяется только имя атрибута класса. Свойства CSS имеют те же значения, что и первый миксин.
Преимущество второго миксина в том, что он предлагает вам возможность создавать свои собственные классы. Однако это может быть не очень хорошим решением, если в вашем проекте много изображений.
Параметры конфигурации
Компас позволяет нам настраивать спрайт-лист, используя дополнительные переменные конфигурации. Вот некоторые из них:
-
$sprite-selectorsВозможные значения:hovertargetactivefocusЗначения по умолчанию:hovertargetactivefocus -
$disable-magic-sprite-selectorsВозможные значения:truefalseЗначение по умолчанию:false -
$icon-layoutВозможные значения:horizontalverticaldiagonalsmartЗначение по умолчанию:horizontal -
$icon-spacingЗначение по умолчанию:0 -
$sprite-dimensionsЗначение по умолчанию:false -
$default-sprite-separatorВозможные значения:-_Значение по умолчанию:-
Переменные выше должны быть определены до создания нашего спрайт-листа. Это означает, что перед добавлением следующей директивы:
@import "icons/*.png";
Давайте теперь поэкспериментируем с двумя из них в нашем проекте.
В качестве первой попытки мы изменили макет листа спрайта на smart
$icons-layout:smart;
Это приводит к следующему листу спрайта:
Стоит отметить, что мы не можем использовать smart$icon-spacing Это происходит потому, что метод размещает спрайты оптимальным образом, удаляя как можно больше пустого пространства между ними.
Теперь давайте посмотрим, что произойдет, когда мы добавим переменную ниже:
$icons-sprite-dimensions:true;
После компиляции мы получаем что-то вроде этого CSS-вывода для одного из сгенерированных классов:
.icons-facebook {
height: 32px;
width: 32px;
}
Так что случилось? Compass имеет возможность измерять размеры каждого изображения и выводить их в скомпилированный CSS. Это отличная функция, которая может быть полезна, когда спрайт-лист содержит изображения, которые имеют разные размеры. Однако, если у нас есть изображения с одинаковыми размерами, это может привести к раздутому CSS.
Вне Основ
Как мы уже видели, создание спрайт-листа требует следующих магических директив:
@import "<Images_Folder_Name>/*.png";
@include all-<Images_Folder_Name>-sprites;
@include <Images_Folder_Name>-sprite(Image_Name);
Помимо них, есть также некоторые дополнительные функции и миксины, которые мы можем использовать для создания нашего спрайт-листа. Вот некоторые из них:
-
sprite-map -
spritebackground-position -
sprite-dimensions
Чтобы лучше понять, как они работают, давайте снова предположим, что мы хотим создать собственный класс с именем creator Мы определяем карту спрайтов (запрашивая smartbackground-positionicons-zurckerberg.png Затем мы получаем размеры этого изображения. После этого мы готовы присвоить этот класс нужному элементу HTML.
Вот код, который вызывает то, что описано выше:
$icons: sprite-map("icons/*.png", $layout: smart);
.creator {
background: sprite($icons, zuckerberg);
@include sprite-dimensions($icons, zuckerberg);
}
А вот и CSS:
.creator {
background: url('../images/icons-s855a77086a.png') 0 -232px;
height: 190px;
width: 190px;
}
Вывод
В этой статье я кратко познакомил вас с концепцией техники спрайтов CSS. Затем я показал вам основы генератора спрайтов Compass. Есть больше вариантов, чем мы рассмотрели здесь, но я надеюсь, что у вас появилась идея генерировать спрайты с помощью Compass.