Sass — продвинутый CSS

[VEG]

Хочу поделиться с вами своим последним открытием. Я попробовал Sass и теперь не представляю, как раньше жил без него :)

Sass — это по сути расширенный вариант CSS, который позволяет значительно упростить жизнь верстальщику. Вы можете использовать переменные, огромное количество дополнительных функций и тому подобное — и всё это будет работать на всех браузерах. Например, если бы стили prosilver-а писались бы на Sass — можно было бы задать одну переменную с основным цветом, а остальные цвета можно указать в стилях относительно заданного цвета (например, на 10% темнее и т.д.). После этого разукрасить prosilver в другой цвет можно было бы изменением одной единственной строки. Посмотрите примеры на официальном сайте. Также интересно описание всех плюшек.

Sass предлагает два синтаксиса: SCSS (более новый) и SASS (более старый). Первый полностью совместим с CSS и понравится всем верстальщикам, второй понравится любителям Ruby и других языков без фигурных скобок и с использованием пробелов для обозначения блоков. Всё, что вы напишите в синтаксисе SCSS или в SASS будет скомпилировано в обычный CSS. При этом количество кода, как правило, значительно сокращается :) Код становится более понятным (особенно из-за поддержки вложенности селекторов) и простым в поддержке.

Compass — это огромная библиотека расширений для Sass. В ней сконцетрировано столько полезностей, сколько не снилось другим аналогичным расширениям CSS типа Less :) Например, вы можете вставлять inline-изображения одной инструкцией. Или подставлять размеры заданных изображений в CSS без необходимости каждый раз указывать их вручную.

Небольшая инструкция по установке и использованию Sass и Compass:

1. Скачать Руби здесь: http://rubyinstaller.org/downloads/ (Sass написан на Руби)
2. Начните установку, но при этом обязательно установите галочку «Add Ruby executables to your PATH»
3. Запустите консоль в любом каталоге и запустите там команду установки Compass (что также автоматом установит и Sass):

   Код: Выделить всё

   gem install compass

4. Всё, Sass готов к работе!

Пример работы с Sass:

1. В каталоге, где вы хотите разместить css файл стилей, создайте файл style.scss
2. Запустите в этом каталоге команду:

   Код: Выделить всё

   sass --style expanded --no-cache --compass --watch style.scss:style.css

Всё! Теперь всё, что вы будете писать и сохранять в style.scss моментально будет компилироваться в style.css, и вы сразу же будете видеть изменения в браузере! Для того, чтобы каждый раз не писать эту команду, можете просто создать bat файл с этим содержимым, и запускать Sass двойным кликом по этому файлу.

Пока что никаких плюшек не описываю — просто посмотрите примеры на официальном сайте. На мой взгляд там всё понятно. Но если что-то не ясно — спрашивайте, подскажем :)

Немного статей на русском:

• Заметка ленивого верстальщика о SCSS и Compass Framework
• SCSS — немного практики
• SCSS: пара полезных техник

[KDit]

VEG, что-то из этого будете использовать\задействовать в будущем для phpbbex?

[VEG]

Пока что я слежу за развитием проекта PHPSass, который позволяет компилировать Sass из PHP. В будущем вполне возможно появление встроенного в phpBBex компилятора Sass. Это конечно было бы очень круто, оформить стандартный стиль в виде SCSS файла — тогда реально можно было бы одним параметром изенять цветовую гамму всего сайта. И сам phpBBex бы следил за актуальностью скомпилированных версий стилей (то есть не нужно было бы ставить руби и компилировать файл на локалке). При этом любители классического CSS могли бы модифицировать сгенерированный Sass файл для своих модификаций. То есть все были бы довольны :) Но это большой объём работ. Пока что вы можете использовать Sass для удобного написания стилей для себя. Например, пригодится при серьёзном редизайне phpBBex.

[factotum]

до кучи для начинающих по русски: http://www.coolwebmasters.com/cssstyle-sheets/3458-saas-compass.html
можно читать до инита