У меня есть признание: я думаю, что части CSS отстой. Это повторяющееся, утомительное и … ну, вроде тупое.
Я, например, считаю довольно нелогичным указывать стили потомков следующим образом:
#banner { color: white; background: black; } #banner a { color: yellow; } #banner p { margin: 0; } #banner ... #banner ... #banner ... … И так далее, и так далее. Вместо этого это имеет для меня больше смысла:
#banner { color: white; background: black; a { color: yellow; } p { margin: 0em; } ... }
А как насчет переменных? Они были бы крутыми
@logo = #457301; h3 { color: @logo; } #sale { border: 1px solid @logo; } .alert { background: @logo; }
Ты со мной? Что ж, Меньше обещает сделать эти мечты и больше счастливой реальностью. Вы бы написали таблицу стилей с использованием синтаксиса Less, который очень легко подобрать — это просто CSS с некоторыми дополнительными CSS-подобными дополнениями. Затем вы используете гем Less Ruby, чтобы преобразовать его в обычный CSS — запустите его из командной строки или включите в приложение.
Less позволяет вам использовать переменные и вложенные селекторы, как показано выше, но также предлагает способ включения классов в классы и некоторые простые математические операторы. Сладкий! Давайте разберем его с меньшими темпами и посмотрим, как он справляется с более простой таблицей стилей.
Допустим, я делаю таблицу стилей для достаточно распространенной структуры сетки, например:
Обычно я выбираю ширину для всей страницы (скажем, 960 пикселей — это популярный размер) и строю различные ширины на основе этого, возможно, действительно используя систему сетки из фреймворка. Я бы хотел, чтобы самые верхние блоки занимали одну треть ширины контейнера, второй набор — одну четверть, а нижние — одну шестую, поэтому я разделю соответствующим образом, используя свой удобный калькулятор. У меня есть определенный любимый зеленый, который я хотел бы использовать в качестве цвета заголовка для некоторых полей, цвета границы для вторичных заголовков и фона для нижнего колонтитула. Есть элемент, который выглядит как нижний колонтитул, но с другим шрифтом. О, и я хотел бы добавить некоторые базовые спецификации шрифтов в каждый из разделов — текст будет уменьшаться по мере того, как вы будете двигаться вниз. Все заводные:
#container { width: 960px; } .box { float: left; } #main .box { width: 320px; } #main .box h3 { background: #450; } #secondary { font-size: 90%; } #secondary .box { width: 240px; border-bottom: 1px solid #450; } #footer { font-size: 80%; } #footer, #super { background: #450; color: #fff; } #footer .box { width: 160px; } #super { font-family: cursive; }
Все отлично, пока я не решу, что хочу изменить ширину контейнера. Теперь мне нужно вернуться и отредактировать ширину container и каждого из потомков в main , secondary и footer . Затем я решил использовать фиолетовый вместо зеленого, поэтому мне нужно изменить цвет заголовков основных блоков, границ дополнительных блоков и фона нижних колонтитулов. Досадно!
Давайте представим, что вместо этого я использовал Less для этой задачи. Во-первых, конечно, мне нужно установить Less, это быстрая работа в командной строке:
sudo gem install less
Теперь я открою новый текстовый файл и начну писать Меньше. Я укажу
базовая ширина в переменной, @base :
@base: 960px;
И мой любимый цвет:
@pretty: #450;
Затем я буду использовать переменную @base чтобы указать ширину основного, дополнительного и нижнего полей, как часть этой общей ширины. Чтобы определить каждого из дочерних блоков каждого раздела, я буду использовать вложенные селекторы, чтобы определить, как я хочу, чтобы дочерние блоки каждого раздела отображались. Переменная @pretty используется везде, где мне нужно указать этот цвет. Вот остальная часть моего файла Less:
#container { width: @base; } .box { float: left; } #main { .box { width: @base / 3; h3 { color: @pretty; } } } #secondary { font-size: 90%; .box { width: @base / 4; border-bottom: 1px solid @pretty; } } #footer { font-size: 80%; background: @pretty; color: #fff; .box { width: @base / 6; } }
Поскольку super выглядит так же, как и footer , но с другим шрифтом, я буду использовать технику включения классов Less (они называют это mixin), чтобы сказать ей также включать эти объявления:
#super { #footer; font-family: cursive; }
Я создам файл CSS, используя это простое утверждение в командной строке:
lessc mystylesheet.less
В результате появляется таблица стилей с почти таким же содержимым, что и у меня, как обычно, описанным выше, за исключением моих объявлений footer и super объявлений. Вместо того, чтобы группироваться, общие декларации повторяются:
#footer { font-size: 80%; background: #450; color: #fff; } #super { font-size: 80%; background: #450; color: #fff; font-family: cursive; }
Подробнее об этом маленьком раздражении позже.
Теперь, так как Less создал почти одинаковую таблицу стилей, вам может быть интересно, куда я иду с этим. Ну, вот здесь мы и подошли к той части, где пришло время изменить свое мнение о ширине и цвете, и именно здесь Менесс действительно вступает в свои права. На этот раз мне нужно изменить только две строки в моей таблице стилей. Прежде всего, давайте настроим значение базовой переменной, например так:
@base: 720px;
Теперь давайте изменим зеленый цвет на фиолетовый:
@pretty: #619;
Теперь я могу оставить остальные объявления в покое и создать новый файл CSS. Для меня сделаны пересчеты ширины ящиков и замены цвета:
#container { width: 720px; } .box { float: left; } #main .box { width: 240px; } #main .box h3 { color: #619; } #secondary { font-size: 90%; } #secondary .box { border-bottom: 1px solid #619; width: 180px; } #footer { font-size: 80%; background: #619; color: #fff; } #footer .box { width: 120px; } #super { font-size: 80%; background: #619; color: #fff; font-family: cursive; }
Конечно, это очень простой пример. В реальном мире сложный шаблон на основе сетки может содержать десятки объявлений, основанных на одной фигуре; цветовая схема может вращаться вокруг двух или трех основных оттенков. Используя Less, мы можем рассматривать эти базовые определения как истинные переменные и тратить меньше времени на их поддержание.
Метод включения Less может быть более аккуратным, если он достаточно умен, чтобы сгруппировать общие элементы смешанных объявлений. С другой стороны, мне нравится то, как это получается здесь — мне нравится организовывать мою таблицу стилей в разделы в соответствии с назначением:
/* heading styles */ ... /* main content styles */ ... /* footer styles */ ...
Если в области заголовка есть стиль, который мне нравится, и я хочу, чтобы элемент в моем нижнем колонтитуле напоминал его, я бы предпочел не хранить этот элемент нижнего колонтитула в разделе заголовков. Если вы хотите быть умным и использовать сгруппированные селекторы, вам придется поместить оба этих стиля куда-нибудь. Удобство этой функции перевешивает эту небольшую неприятность для меня, и, конечно, использование миксинов абсолютно необязательно.
Мне нравится, когда умные люди придумывают отличные способы сэкономить время на CSS, и я вижу, что буду использовать этот отличный инструмент в будущем. Вы можете проверить Меньше на его веб-сайте.