динамический css на php

Прототипирование

Удобно? Тогда теперь можно и о прототипировании поговорить

}// и т.д. И т.п.

background-color: $attentionColor;

На выходе получим:

background-color: $attentionColor;

Предположим есть у вас элемент товар и у него есть много вложенных элементов, которые требуют отдельного оформления: цена, описание, кнопка купить, номер модели и прочее. И конечно же теперь придётся писать сто раз подряд li.product тра-та-та теперь всё проще:

Вложенные селекторы

Строки в переменных можно не экранировать, они закрываются семиколоном (точкой с запятой).

В примере я ставлю подчёркивание в конце переменных, это нужно для того чтобы необъявленные переменные не заменялись на переменные с общим префиксом. Проиллюстрирую выше сказанное: $newColor = #ffcc00, а $newColorBg не объявлен, но используется в коде, в результате от $newColorBg останется #ffcc00Bg.

list-style-image: url('$path_/folder.png');

$headerFonts_ = Arial, Tahoma, Verdana

Теперь можно использовать переменные:

Об этом новшестве мне хочется написать первым делом, все мы часто сталкивались с ситуацией когда нужно поменять цвет в макете, а всё уже почти готово, а поиск и замена не подходят потому что цвет нужно менять не везде, а только у определённых элементов или когда перед сдачей в продакшн необходимо вычистить все отладочные правила, а их много Уф. Даже перечислять не хочется ситуаций когда требуется что-то быстро изменить, чтобы поменялось там где нужно, а там где не нужно нет!

Что же даёт нам xCSS при первом рассмотрении? Во-первых, позволяет избежать путаницы в коде с помощью вложенных селекторов, во-вторых, позволяет избавиться от необходимости править всю таблицу стилей, если понадобилось поменять какие-то значения, в-третьих, сократить количество кода избавившись от повторяющихся правил, в-четвёртых, минимизировать код. Плюсы на лицо, теперь давайте познакомимся с xCSS поближе.

Как я уже писал выше, xCSS это класс для работы с динамическим CSS. Автор вдохновлённый идеей и (да-да, для Ruby уже есть такая штука) создал класс, который позволяет работать с CSS динамически: разработчику доступны переменные, классы, вложенные селекторы и прототипирование.

Заранее прошу прощения за вёрстку что-то у нас с Хабром в этот раз не заладилось (

Я давно ждал этого момента, нет честно, где-то в подкорке я очень-очень хотел такой штуки чтобы было удобно писать на CSS без переписывания похожих стилей по два раза, без выыскивания нужных разделов в собственном коде, в общем хотелось чтобы на CSS можно было работать легко и просто, что-то я затянул И так встречайте xCSS php-класс для работы с динамическим CSS.

13 октября 2009 в 05:11

Динамический CSS? / Хабрахабр