Как начать использовать CSS препроцессоры

HTML, верстка, кодинг, CSS /
Всем здравствуйте. В связи с последними постами в этом блоге на тему CSS препроцессоры, решил внести и свои 5 копеек. Надеюсь, всем тем, кто еще не пользуется этим замечательным инструментом, этот пост поможет это исправить.

SCSS

SCSS, SASS, LESS отличаются синтаксисом. Я выбрал SCSS, так как его синтаксис самый близкий к нативному CSS.

Основные фишки, за которые я полюбил препроцессоры:
1) Переменные
Я создаю отельный файл vars.scss, где указываю в переменных цвет текста, ссылок, фона и прочее. В дальнейшем, если дизайнер решит поменять цвет ссылок, мне понадобится изменить только одну строку. И, кстати, над переменными можно применять арифметические действия.
2) Вложенные классы или наследование
Это самая крутая штука. Больше не надо писать конструкции типа:
ul {} 
ul li {}
ul li a {}

Теперь я это делаю так:

ul {
 /*стили ul*/
 li { 
  /*стили ul li*/ 
   a {
    /*стили ul li a*/
     }
    }
   }

3) Mixins — пользовательский функции
Миксины — с технической стороны — функции. Фишка в том, что миксину можно задать параметры.
@mixin rounded($radius) { border-radius: $radius;}
.btn{@include rounded(10px);}

Такие штуки очень помогает в том же примере со скругленными углами. В миксине учитываем все префиксы, а в коде уже скругляем углы одной строкой.

Есть еще много фишек, но я в работе в основном пользуюсь только этими.
Остальное читайте на офф. сайте и на хабре:
http://sass-lang.com/guide
http://habrahabr.ru/post/140612/
http://habrahabr.ru/post/96417/

Compass


Compass — это CSS фреймворк на основе SASS. Ко всем прелестям SCSS он добавляет кучу готовых миксинов, хэлперов и еще несколько интересных фишек.

Во-первых, для тех же скругленных углов или CSS3 свойств не надо писать свои миксины, всё уже есть и, конечно, со всеми префиксами.
Во-вторых, хелперы, которые позволяют работать с цветом, изображениями и многим другим.
В-третьих, лэйауты. Прижать футер к низу экрана можно одной строкой, подключил соответствующий файл
@import "compass/layout/sticky-footer"


А еще компасс умеет собирать спрайт из отдельных картинок и при этом он еще создает специальный класс для каждой картинки в составе спрайта.
Compass очень интересная штука и я рассказал о малой доле всех его возможностей. Читайте подробнее в официальной документации. compass-style.org/reference/compass/

И, напоследок

Раньше у меня был один, максимум два css файла, где хранились все стили. Чем больше проект, тем тяжелее было работать со стилями. Сейчас у меня на каждый логический блок (меню, подвал, шапка и т.д.) — отдельный файл, который потом компилируется с остальными в один общий.

Как начать использовать



Вариант номер раз

1. Качаем Руби с сайта https://www.ruby-lang.org/en/downloads/
(прямая ссылка http://cache.ruby-lang.org/pub/ruby/2.0/ruby-2.0.0-p353.tar.gz)

2. Устанавливаем руби

3. Запускаем консоль Windows (Win+R в окошко ввести cmd)

4. Перемещаемся в папку с руби (cd.. перейти в предыдущую категорию, cd Имя_каталога — переходим в указанную категорию). Можно сразу запустить нужную команду из пункта 5, пропустив этот шаг.

5. Теперь самое важное. Сначала устанавливаем Compass. Помните, что все команды выполняются из каталога Ruby200\bin. То есть у меня вся строка выглядит так C:\Ruby200\bin>compass.bat gem update --system
1) Находясь в каталоге Ruby200\bin пишем команду gem.bat update --system
2) gem.bat install compass

6. Теперь можно создать новый проект
compass.bat create «C://myproject»
и получаем всю нужную структуру, да еще сразу с compass/reset (сброс стилей)

7. Для «слежения» за изменениями в проекте используем команду
compass.bat watch «C://myproject»

Для того, чтобы постоянно не запускать консоль для создания нового проекта и слежения за ним (а слежение надо запускать после каждой перезагрузки компьютера) существует очень удобная программа Prepos (http://alphapixels.com/prepros/)
Просто перетаскиваете в окно программы папку со своим проектом и Prepos начинает за ним следить и отчитывается приятным окошко о результатах. У программы довольно много настроек и полная поддержка Компаса, а также можно «следить» за js файлами и из нескольких компилировать один, да еще и в сжатом виде.

Итак, всё что я описал выше есть на этой странице http://compass-style.org/install/

Вариант номер два

В момент написания статьи я зашел на вышеприведенный сайт и там появилась специальная программа, для тех кто не дружит с командной строкой. http://mhs.github.com/scout-app/

1. Качаем программу, устанавливаем

2. В окне программы, в левом нижнем углу жмем на "+" и выбираем каталог со своим проектом

3. В право части появится окно настроек, там есть 2 обязательных параметра: Input Folder и Output Folder.

4. Предварительно создаем в рабочем каталоге еще 2 — /scss/ и /css/
В первом у нас будут рабочие файлы, во втором скомпилированный .css файл

5. Затем жмем стрелку в левой части окна возле названия проекта и программа начинает «следить» за изменениями, результаты которых можно видел в левой части на вкладке Log

Преимущество первого варианта, наверное только для тех, кто пользуется руби. Им просто нужно будет скачать компасс и создать проект. Для всех остальных второй вариант предпочтительней.

P.S. Опыта в написании статей нет, если заметили ошибки, пишите в личку, всё исправлю.

11 комментариев

faiwer
trigger
спасибо, эта ссылка уже есть в статье.
faiwer
Хм, не обратил внимания =) Не думал, что мою статью кто-нибудь укажет в материалах :D
trigger
О как, так Вы автор даже это статьи на хабре. Спасибо за неё, она мне тоже помогла в период, когда осваивал SCSS
talgautb
Вариант номер три
— Prepros
В stylus код выглядит чище :):

ul
  // styles
  li
    // styles
    a
      //styles


Посмотри в эту сторону ;)
trigger
смотрел и SASS, и LESS, но мне как раз и не понравились варианты без скобок. Возможно, потому что в редакторе это выглядит не так наглядно. Ну и разработчикам, не владеющими этими техниками, будет гораздо проще понять SCSS.
goldy
Только потому что нету "{ }" он чище?
По моему это жутко не удобно же(imho).
talgautb
мое имхо) там еще много плюсов, по крайней мере, для моей работы самое то
goldy
Разве что какие то сторонние фишки, для меня без "{}" жутко не удобно )
talgautb
можете и с {} писать ;)
dastiw1
Новая версия twitte bootstrap теперь поддерживает SASS! Это круто
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.