13.08.2015 Установка Sass 21.04.2015 Смена цвета SVG изображения на странице 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Замена стандартного ALERT с помощью JQUERY 30.10.2011 Модальное окно как вконтакте 30.03.2011 Стилизация html button 02.11.2011 Табы без использования JavaScript, на css и html
#516

Установка Sass

Установка и настройка CSS препроцессора Sass.

1. Устанавливаем ruby и rubygems
  1. # apt-get install ruby-full rubygems

2. Устанавливаем sass
  1. # gem install sass

3. Устанавливаем compass для компиляции css
  1. # gem install compass

4. Для инициализации в директории проекта выполняем, после чего будет создан конфиг, в котором необходимо настроить пути для файлов css, js, images
  1. $ compass init

5. В директории sass создаем файлы .scss, куда пишем SCSS код.

6. Чтобы изменения автоматически компилировались в css файл, необходимо создать процесс в директории проекта и не убивать его до окончания работы.
  1. $ compass watch


Возможная ошибка при установке:

ERROR: Error installing compass:
ERROR: Failed to build gem native extension.

Решение:
  1. # apt-get install ruby2.1-dev build-essential


Compass и генерация спрайтов

1. В начале файла scss необходимо подключить расширение:
  1. @import 'compass/utilities';

2. В начале файла объявляем переменную $icons, а icons_dir - папка, в которой будут лежать наши файлы иконок. icons_dir создается в основной папке для изображений (images), которая указывается в конфиге.
  1. $icons: sprite-map("icons_dir/*.png");

3, Можно добавить различные настройки, которые будут учитываться при генерации спрайта, например можно указать расположение элементов $layout - vertical, horizontal, diagonal, smart, или отступы между элементами $spacing:
  1. $icons: sprite-map("icons/*.png",
  2. 	$layout: horizontal,
  3.         $spacing: 25px
  4. );

4. Для того, чтобы использовать изображение для свойства background, после всех манипуляций необходимо написать следующий код, где $icons наша переменная, а home - название нашей иконки (images/icons/home.png):
  1. #selector {
  2.          background: sprite($icons, home) no-repeat;
  3. }

Результатом выполнения будет путь до спрайта с указанием позиции
  1. #selector {
  2.          background: url('../images/icons-s15e87e094d.png') -789px 0 no-repeat;
  3. }

Дополнительные настройки (файл config.rb):

1. Чтобы включить относительные пути добавляем (или раскомментируем) строку в конфиг:
  1. relative_assets = true

2. Чтобы отключить комментарии отладки в файле добавляем (или раскомментируем) строку в конфиг:
  1. line_comments = false

Установка плагинов на sublime2:

1. Открыть консоль редактор - ctrl + ~
2. Установить package control через консоль sublime - https://packagecontrol.io/installation
3. ctrl + shift + p - открывает меню в котором выбираем Package Control: Install Package, а далее осуществляем поиск по плагинам и устанавливаем плагины sass и scss.

О сайте