#516
Установка Sass
Установка и настройка CSS препроцессора Sass.
1. Устанавливаем ruby и rubygems
# apt-get install ruby-full rubygems
2. Устанавливаем sass
3. Устанавливаем compass для компиляции css
4. Для инициализации в директории проекта выполняем, после чего будет создан конфиг, в котором необходимо настроить пути для файлов css, js, images
5. В директории sass создаем файлы .scss, куда пишем SCSS код.
6. Чтобы изменения автоматически компилировались в css файл, необходимо создать процесс в директории проекта и не убивать его до окончания работы.
Возможная ошибка при установке:
ERROR: Error installing compass:
ERROR: Failed to build gem native extension.
Решение:
# apt-get install ruby2.1-dev build-essential
Compass и генерация спрайтов
1. В начале файла scss необходимо подключить расширение:
@import 'compass/utilities';
2. В начале файла объявляем переменную $icons, а icons_dir - папка, в которой будут лежать наши файлы иконок. icons_dir создается в основной папке для изображений (images), которая указывается в конфиге.
$icons: sprite-map("icons_dir/*.png");
3, Можно добавить различные настройки, которые будут учитываться при генерации спрайта, например можно указать расположение элементов $layout - vertical, horizontal, diagonal, smart, или отступы между элементами $spacing:
$icons: sprite-map("icons/*.png",
$layout: horizontal,
$spacing: 25px
);
4. Для того, чтобы использовать изображение для свойства background, после всех манипуляций необходимо написать следующий код, где $icons наша переменная, а home - название нашей иконки (images/icons/home.png):
#selector {
background: sprite($icons, home) no-repeat;
}
Результатом выполнения будет путь до спрайта с указанием позиции
#selector {
background: url('../images/icons-s15e87e094d.png') -789px 0 no-repeat;
}
Дополнительные настройки (файл config.rb):
1. Чтобы включить относительные пути добавляем (или раскомментируем) строку в конфиг:
2. Чтобы отключить комментарии отладки в файле добавляем (или раскомментируем) строку в конфиг:
Установка плагинов на sublime2:
1. Открыть консоль редактор - ctrl + ~
2. Установить package control через консоль sublime -
https://packagecontrol.io/installation
3. ctrl + shift + p - открывает меню в котором выбираем Package Control: Install Package, а далее осуществляем поиск по плагинам и устанавливаем плагины sass и scss.