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

Я изготавливаю сайты «под ключ». Начиная от дизайна, кончая заливкой на хостинг. И самая нелюбимая мною часть этого увлекательного процесса — верстка дизайна в 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 раза! Думаю, что больше аргументов не требуется.
Поделиться публикацией

Похожие публикации

Комментарии 60

    +4
    О! Как раз то, о чём я писала! Это прекрасно!
      0
      Синтаксис интересный, но что-то бегло просмотрел доки и не понял на каком уровне он работает, если, например, использовать его с php-фреймворком. Сам обрабатывает запросы сервера и транслирует на лету, трансляцию надо запускать ручками, ещё как-то?
        0
        Если использовать не с руби-фреймворком, то компилировать SCSS в CSS придется ручками:
        $ compass compile
          0
          по-моему можно написать compass watch myproject
          +6
          Сотрите на code.google.com/p/phamlp/
            +1
            *Смотрите
            • НЛО прилетело и опубликовало эту надпись здесь
              0
              О, благодарю, пробую разобраться.
                0
                А никто к zf это добро не приделывал?
                0
                что то он ничего толком не компилирует
                  0
                  У этой реализации есть один большой недостаток — автор не особо открыт к общению.

                  Имеются несколько багов, которые обнаружить довольно сложно, например: code.google.com/p/phamlp/issues/detail?id=54

                  Я-бы им рискнул пользоваться только если он будет генерировать абсолютно идентичный вывод с compass (Sass)
                +3
                За что ж все так верстку не любят? :)
                  0
                  Наверное из-за того что некоторые браузеры любят воспринимать результат верстания по-своему, а не так как запланировал автор.
                    +3
                    А также потому что 80% верстки в разных проектах повторяется, а копипастить не получится
                      0
                      Просто я, как дизайнер, сначала рисую макет в ФШ, а потом мне же его еще и, как верстальщику, заново в html «рисовать» надо :) А людям не очень нравится повторяться. А если уж требуется, то хотелось бы это сделать по-быстрее.
                      0
                      Вопрос к знающим людям. Есть ли возможность включения подобного функционала в сам CSS?
                      0
                      Да да, это замечательная штука. Для .NET, кому интересно, тоже есть решение: dotlesscss.org
                        0
                        Так и не понял что куда прописать в проект чтобы файл .less при компиляции превращался в .css
                        В reference добавил dll.
                        В web.config добавил
                        <add type="dotless.Core.LessCssHttpHandler,dotless.Core" validate="false" path="*.LESS" verb="*" />
                        

                        В коде писал и
                        <link href="~/Content/Site.less" rel="stylesheet" type="text/css" />
                        и
                        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

                        бесполезно. (
                          0
                          Почти все верно. Надо подключать в html .less файл. А серверу надо сперва указать, что он должен *.less расширение как-то обрабатывать. Этим занимаются ISAPI-модули/расширения.

                          iis6: Идем в настройки сервера -> выбираем закладку, где физический путь к приложению, там ниже будет кнопка дополнительно -> добавляем ISAPI расширение: .less, а путь к выполняемому файлу тот же что и, к примеру, у расширения .ascx.
                          Галочка возле "Скриптовый модуль", а галочка возле "Проверять или файл существует" снята. И теперь должен этот .less файл грузиться в браузере, так как в web.config вы уже прописали нужный handler.

                          iis7(integrated mode): Все проще — в web.config добавляем —

                          <handlers>
                          <add name="LessModule" path="*.less" verb="*" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll" resourceType="Unspecified" requireAccess="Read" preCondition="classicMode,runtimeVersionv2.0,bitness32" />

                          Ну и потом сново вступает в действие указаный handler и возвращает нам обработаный .less файл.

                          У движка этого есть еще одна классная фича — он умеет минимизировать css код. Удачи в использовании!
                        +2
                        Автору, спасибо за упоминание.
                        Оба Framework-а поддерживаются в Drupal в виде модулей: sass, compass
                          0
                          А так что бы отдельно — есть библиотечки для компиляции?
                        –3
                        Я изготавливаю сайты «под ключ». Начиная от дизайна, кончая заливкой на хостинг. И самая нелюбимая мною часть этого увлекательного процесса — верстка дизайна в HTML. Вроде бы ничего сложного, но многие рутинные вещи очень утомляют. Поэтому я постоянно нахожусь в поисках интересных решений в этой области.


                        Вот вам самое интересное решение — наймите квалифицированного верстальщика.
                          0
                          Квалифицированного — это фрилансера с портфелем?
                          Не ради смеха спрашиваю, мне действительно интересно, где это можно пройти квалификацию?
                            0
                            Я-то ради смеха написал, конечно.

                            Квалифицированный специалист никогда не оставляет проблемы, о которых он знает, без решения. Даже если его работа уже оплачена. И дело тут не в «пройти квалификацию». Это скорее опыт+порядочность.
                              0
                              маленький минус: человек зарабатывает на реализации. А за специалиста надо будет платить. Вот каждый, и автор в том числе, «находится в поисках интересных решений в этой области».
                                +1
                                Согласен с вами.
                                Это, в некотором смысле, правда о том, как верстаются сайты под ключ.
                          +2
                          мне, как верстальщику, интересно:
                          1) насколько чистый код на выходе получается (нету ли там неиспользуемых стилей, как это часто бывает при использовании фреймворков)
                          2) я не сильно разбираюсь, поэтому объясните сам процесс компиляции, он происходит один раз и выкладывается на сервак, например, или каждый раз стили компиляться заново серваком?

                          Я бы поковырялся в документации, но нет времени((

                            +3
                            1. ну как сказать. если использовать blueprint/semantic то довольно много повторяющихся стилей в разных селекторах, но никто не мешает после компилирования прогнать через оптимизатор (уменьшает раза в два иногда и больше)

                            2. скомпилировал — выложил — поправил — скомпилировал — выложил (надоело, написал скрипт, который сам все это делает :) )
                              0
                              спасибо
                                0
                                1. ощущаю себя отставшим от жизни. это сейчас модно — сначала использовать излишне навороченные фреймворки, а потом прогонять через оптимизатор?

                                последние проекты верстал руками без фреймворков — почувствовал себя гораздо свободнее.

                                2. компилировать исходники для интерпретируемых (html, css) данных — that's kinky! ;)
                                  0
                                  1. руками оно конечно чище выходит. но с фреймворками проще как-то. особенно всякие красивости. нужна кнопка чтобы всякие там ховеры и прочее сразу — @include button-button(). все. и там вещи уже оттестированы и точно будут везде работать. так что тут спорный вопрос что лучше. если со стороны выходного кода то ручной код (да и то не факт). а если со стороны скорости разработки то фреймворк.

                                  2. ну haml/sass приятнее пользовать, кто виновать что браузер их не понимает :) вот и приходиться компилировать.
                                    0
                                    виновать = виноват
                                    0
                                    1. Это стало модно, как появились языки высокого уровня

                                    2. Программы на ассемблере/С/Java/C#/… никогда не компилировали? А ведь это тоже самое — компилируете исходники для интерпретируемых данных (машкоды, байткоды)
                                    0
                                    Насчет второго: с третьей версии можно просто: sass --watch и забить.
                                  +5
                                  Этот язык дает верстальщику 4 сверхспособности:… «Вложение»… и «Наследование селекторов»
                                  facepalm.jpg
                                    0
                                    ооо
                                    тоже версстаю сайты) такого не хватает действительно, особенно переменных
                                      0
                                      Было бы прикольно, если бы стандарт CSS расширялся бы в эту же сторону. :)

                                      Чем-то, кстати, напоминает, запланированные (но так и не реализованные фактически никем) изменения в стандарте.

                                      Например, CSS variables:

                                      @variables {
                                      CorporateLogoBGColor: #fe8d12;
                                      }

                                      div.logoContainer {
                                      background-color: var(CorporateLogoBGColor);
                                      }
                                        +2
                                        1. ваш редактор не поддерживает замену подстроки во всём файле? о_0"

                                        2. ага, свойства вперемешку с селекторами — оочень улучшает читабельность х) у меня редкий селектор имеет больше 2 членов.

                                        3. все бы хорошо, да вот только банальный градиент в примесь уже не вынесешь. годится только для простейших вещей типа бордер-радиуса.

                                        4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.

                                        итого — код, который легко писать, но тяжело поддерживать. для «под ключ» конечно сойдёт ._.
                                          +1
                                          1. Ситуация — сначала какие-то элементы были одного цыета, потом решили часть элементов сделать потемнее, а часть оставить как есть… писать регулярку, разбирающую селекторы, причём со всеми особенностями синтаксиса css?
                                            +2
                                            набросай пример и покажи чем тебе тут поможет сабж.
                                            0
                                            1. Замену подстроки врядли назовешь «гибким» решением.

                                            2. Лично мне было очень удобно пользоваться вложениями SCSS, опять же потому, что не люблю повторяться в коде :)

                                            3. примеси для градиентов есть в Compass'е — значит, все реализуемо ;)

                                            4. Если честно, то наследование я сам крайне редко использую. Для этого надо хорошо понимать, зачем оно нужно именно в этом месте. Пример, приведенный мною в тексте, вполне-таки себе показательный.
                                              +2
                                              1. а что в нём не гибкого?

                                              2. лучше каскад уменьши, а не городи селекторы на всю строку

                                              3. ага, умеет только вертикальный, горизонтальный и радиальный градиенты и не работает ни в опере, ни в ие.

                                              4. этот показательный пример гораздо лучше сделать так:

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

                                              .error.notification {
                                              background-color: #f11;
                                              color: #fff;
                                              }

                                              и будет работать без всяких препроцессоров
                                            0
                                            > 3. все бы хорошо, да вот только банальный градиент в примесь уже не вынесешь. годится только для простейших вещей типа бордер-радиуса.
                                            compass-style.org/docs/reference/compass/css3/gradient/

                                            > 4. и если кто-то изменит селектор предка, все дети благополучно сломаются и фиг разберёшься от кого им там надо наследоваться? хорошее решение о-0" уж лучше выносить это дело в примеси.
                                            обычно как раз и нужно, чтобы все дочерние селекторы изменялись при изменении селектора предка. иначе им нет смысла быть дочерними. у тебя есть возможность поменять один селектор предка и получить все дочерние подхватившими это изменение, а не менять пятьсот селекторов руками
                                              0
                                              3. см выше

                                              4. ты селектор с правилами перепутал
                                              0
                                              Градиент в compass тоже есть, только он для Webkit, Mozilla

                                              В IE есть возможность поддержки с помощью фильтра, но это линейный градиент с 2-мя точками (начала и конца) с возможностью горизонтальной и вертикальной ориентации.

                                              Кому интересно, вот моя реализация простого линейного градиента pastebin.com/sTD9CQLR
                                              В довесок потребуется функция на Ruby, которая будет генерировать запись RGBA цвета в принятой IE форме pastebin.com/87vUAd0Z

                                              Только вот такой градиент не советую ставить в качестве фона для элемента внутри которого будет текст (лучше спозиционировать элемент с градиентом «под» элемент с текстом), т.к. ClearType будет принудительно отключен.

                                              Можно сделать более продвинутую реализацию с использованием SVG и VML. Тогда появится возможность создания гораздо более сложных градиентов в IE и Opera, но в IE прийдётся использовать behaviour.

                                              P.S. IE строит полупрозрачные градиенты не так, как это принято делать. Для примера rgba(255, 0, 0, 1) — rgba(0, 255, 0, 0). Этот градиент меняя прозрачность должен также менять цвет на зелёный, в ie он просто меняет прозрачность, а на цветовую составляющую забивает.
                                              +1
                                              Про спрайты забыли сказать =) И еще Lemonade есть. Забудьте про ручную генерацию спрайтов =)
                                                +1
                                                Фреймворк может и хороший, но проблемы вы описываете странные…

                                                Представим ситуацию: вы верстаете страничку, на которой цвет рамки блоков и цвет ссылок должен быть одинаковый


                                                А еще ведь наверняка приходится писать частенько в разных селекторах одни и те же правила, да?


                                                Вы не пробовали использовать общие классы для таких элементов?
                                                  0
                                                  Не нравится мне все это.
                                                  Верстать — это интересно, каждый раз что-то новое, несмотря на множество похожестей.
                                                  Тут все свезено как-то… Ближе к программированию что ли, такой подход некрасив, непрозрачен для не-программистов, хотя бы взглянуть на конструкцию с вложенными фигурными скобками…

                                                  Откровенно говоря, уже достали эти все «упрощаторы» верстки — сетки, бесконечные генераторы layout-ов… Все это — для ленивых программистов, и не совсем для профессионалов, они заставляют подстраивать свой coding style под них, иначе все развалится и разлезется, истинно подход программеров

                                                  Единственно нужная вещь здесь — css variables, пока оно нигде не реализовано, к сожалению
                                                    0
                                                    Тогда стоит взглянуть на Less, он менее функционально богат чем Sass, но зато очень близок к родному CSS. И гораздо более просто в реализации: JS реализации в следующей версии должна стать основной.

                                                    Мне ещё очень нравится идея вложенности.

                                                    0
                                                    Блин у меня у одного вопрос возникает, а как ориентироваться в случае, если я использую Фаербаг?
                                                      0
                                                      FireSass (https://addons.mozilla.org/en-US/firefox/addon/103988/) + во время компиляции scss (sass) нужно включить внедрение отладочной информации

                                                      Правда я никогда им не пользовался, т.к. компилятор (транслятор) формирует отлично структурированный css в дефолтном режиме (не compressed)
                                                      +1
                                                      За время работы верстальщиком у меня сложилось такое мнение что Фреймверки для верстки это зло, потому что хорошая верстка всегда должна подстраиваться под выводимый контент, а в случае с фреймверком происходит диаметрально противоположное.

                                                      По поводу ускорения написания кода. В подавляющем большинстве случаев время затраченное на проектирование структуры, на порядок, меньше времени на написания самого кода, особенно если принимать во внимание существование ZenCoding и темплейтов.

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

                                                      Самое читаемое