9 January 2011

Заметка ленивого верстальщика о SCSS и Compass Framework

Website development
Sandbox
Я изготавливаю сайты «под ключ». Начиная от дизайна, кончая заливкой на хостинг. И самая нелюбимая мною часть этого увлекательного процесса — верстка дизайна в HTML. Вроде бы ничего сложного, но многие рутинные вещи очень утомляют. Поэтому я постоянно нахожусь в поисках интересных решений в этой области.

Не так давно я начал изучать Ruby on Rails 3 и нашел очень интересный плагин для него: Compass. По сути, этот CSS-фреймворк независим от Rails, им можно пользоваться и в других типах проектов.

Расскажу-ка я вам, как Compass облегчил мою жизнь.

SCSS


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

Для себя я выбрал SCSS, ибо он привычен (его синтаксис схож с синтаксисом обычного CSS). Этот язык дает верстальщику 4 сверхспособности:

1. Переменные

Потрясающая вещь! Только ради нее уже можно переходить на SCSS. Представим ситуацию: вы верстаете страничку, на которой цвет рамки блоков и цвет ссылок должен быть одинаковый. И вдруг заказчик говорит, что нужно бы сделать этот цвет посветлее.

.megablock {
  border-color: #A88;
}

.megablock a {
  text-decoration: none;
  color: #A88;
}


И вы ищете и меняете этот цвет во всем stylesheet'е. А при использовании переменных SCSS, этот код можно облегчить и сделать более гибким:


$block-color: #A88;

.megablock {
  border-color: $block-color;
}

.megablock a {
  text-decoration: none;
  color: $block-color;
}


Теперь, чтобы поменять цвета, вам достаточно лишь поменять одну единственную переменную в тексте. Более того, к переменным можно применять математические операции. Например:
$border-color - #111


2. Вложение

Очередная рюшечка, ускоряющая написание стилей. Как часто вам приходилось писать длинные селекторы, вроде table.cart div span a? В SCSS вы можете вкладывать селекторы друг в друга:

table.cart {
    width: 700px;
        div {
        float:left;
        span {
            font-size: 14px;
            a {
                color: $cart-link-color;
            }
        }
    }
}


Зачастую это даже элементарно упрощает чтение кода.

3. Mixins (Примеси)

А еще ведь наверняка приходится писать частенько в разных селекторах одни и те же правила, да? Например, скругление углов для всех браузеров. SCSS позволит вам и тут сэкономить время:

#promo {
  background-color: $promo-bg-color;
  @border-radius(10px);
}


В этом примере я впервые демонстрирую вам некоторые возможности фреймворка Compass, так как «примесь» border-radius уже включена в стандартный набор его возможностей.

4. Наследование селекторов

Еще одна приятность, которую нельзя обойти стороной. По своей сути она похожа на предыдущую:

.notification {
  border: 1px solid;
  margin: 0 auto;
}

.errorNotification {
  @extend .notification;
  background-color: #f11;
  color: #fff;
}


Нетрудно догадаться, что при компиляции селектора .errorNotification в него будут включены все правила из .notification

Compass Framework



Ну а теперь, собственно, о самом фреймворке. Достаточно взглянуть на его документацию, чтобы понять, насколько он может упростить жизнь веб-разработчику. Огромное количество готовых mixin'ов, классов, тесная интеграция с CSS-фреймворком Blueprint.

Чтобы описать все, конечно, у меня не хватит терпения, но пройдусь по основным фишкам фреймворка.

Кроссбраузерный CSS3

Для того, чтобы не писать правила для каждого браузера (WebKit, Mozilla и т.д.), разработчики включили множество инструментов для быстрого написания CSS3-примочек. Градиенты, скругленные углы, тени и многое другое теперь можно создавать одной строчкой.

Хелперы

В Compass также включено много инструментов-хелперов. Например, если вы хотите всем заголовкам задать одинаковый шрифт, в качестве селектора можно воспользоваться headings(all). Есть также готовый инструмент для приклеивания футера к низу страницы.

Хаки и утилиты

Да, особую ценность представляют различные хаки, призванные справляться с кроссбраузерными проблемами. Float'ы, Clearfix'ы, минимумы и т.п.
А как пример жутко полезной утилиты: примесь link-colors(), которая позволяет задать 4 цвета для всех четырех состояний ссылки одной строкой!

Blueprint

Отдельно стоит упомянуть то, что Compass поддерживает все классы CSS-фреймворка Blueprint сразу из коробки. Сетки, типографика, формы, кнопки и все остальное. Лично для меня это было огромнейшим плюсом, так как Blueprint уже давно облегчает мне верстку сайтов благодаря готовым классам, а в комплекте с Compass становится мощнейшим инструментом.

Итого


Но, пожалуй, главное преимущество SCSS и Compass — они очень просты и прозрачны. Чтобы начать пользоваться вышеперечисленными преимуществами мне понадобилось не больше часа времени.
Для Rails-проектов я просто не вижу никакой альтернативы. Хотя, если вам интересно, можете попробовать использовать его и в других средах.
Если подключить еще и HAML, то время верстки страницы в среднем уменьшается в 2-3 раза! Думаю, что больше аргументов не требуется.
Tags:compassscsssasscssверсткаrails
Hubs: Website development
+68
30.7k 204
Comments 60
Top of the last 24 hours