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

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #1 VEG » 14.01.2013, 13:47

Хочу поделиться с вами своим последним открытием. Я попробовал 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 двойным кликом по этому файлу.

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

Немного статей на русском:
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #2 KDit » 14.01.2013, 19:05

VEG, что-то из этого будете использовать\задействовать в будущем для phpbbex?
Последний раз редактировалось KDit 14.01.2013, 20:59, всего редактировалось 1 раз.
KDit
Репутация: 67
С нами: 11 лет 8 месяцев

Сообщение #3 VEG » 14.01.2013, 19:29

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

Сообщение #4 factotum » 08.01.2014, 02:29

до кучи для начинающих по русски: http://www.coolwebmasters.com/cssstyle-sheets/3458-saas-compass.html
можно читать до инита
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев


Вернуться в Мастерская 1.x



cron