13 августа 2015 CSS

Установка Sass

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

1. Устанавливаем ruby и rubygems

```
# apt-get install ruby-full rubygems
```

2. Устанавливаем sass

```
# gem install sass
```

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

```
# gem install compass
```

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

```
$ compass init
```

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

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

```
$ compass watch
```

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

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. Чтобы включить относительные пути добавляем (или раскомментируем) строку в конфиг:

```
relative_assets = true
```

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

```
line_comments = false
```

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

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

Поделиться в социальных сетях