Энумерейт: Новонедельные забавы

С опозданием ровно в один день я всё-таки опубликую новые забавы, которые, я напоминаю, были открыты материалом о дескриптивном HTML. На этот раз тема парсеров остаётся такой же открытой, как и в прошлый раз, но меняется сам объект исследования: на этот раз им становится CSS.

Очень вовремя WebKit анонсирует экспериментальную поддержку переменных в CSS и теперь разработчикам станет ещё проще составлять вполне логичные, самодостаточные CSS-документы, которые позволят составлять репрезентацию для (X)HTML-документа. Введение переменных — это очевидный плюс для верстальщиков, которые, по сути, превращают CSS в ещё более мощный язык программирования (да-да, я не оговорился).

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

В грот!

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

Давайте, пока нам на пятки наступает поддержка переменных в CSS, реализуем небольшой парсер, который будет реализовывать эту самую возможность. А давайте! Писать, даже если кому-то это не нравится, я буду на Ruby, так как считаю, что понять его не составляет большого труда, тем более код я всегда комментирую очень обильно (представьте себе стакан с огромным количеством сахара).

Для начала определимся, как мы будем эти переменные встраивать в сам CSS файл. Я пришёл к такому незамысловатому решению:

/*@ Наши настройки будут храниться тут имя_настройки = значение_настройки @*/ /* CSS-код собственной персоной */

Итак, чтобы разграничить секцию переменных, мы будем использовать комментарии с небольшим дополнением, чтобы парсер смог их найти в коде. Секция переменных (или секции, если их несколько), начинается с символов /*@ и заканчивается символами @*/. Вот так, никакой уличной магии и не требуется.

Теперь напишем файл, над которым мы будем экспериментировать.

/*@ #Цвет документа document_color = #fff #Фон подвала footer_color = #eeeeee @*/ div#mydiv { color: @@document_color; } .footer { background: @@footer_color; color: @@document_color }

Не забывайте, что мы просто забавляемся, поэтому я умышленно ничего не пытаюсь осложнять в наших примерах.

Галереи

Ну что же, давайте начнём использовать интерпретатор Ruby! Перво-наперво, создаём основу нашего класса и инициализацию:

class CSSV #Инициализируем данные def initialize filename, output = "" #Проверяем существование файла raise "CSSV File doesn't exists. Aborting." if not File.exists? filename #Читаем весь наш файл с CSS @cssv = File.read filename #Переменная, содержашая конечный результат @css = @cssv #Переменные, найденные в документе @variables = {} #Обрабатываем наш файл self.parse_cssv #Записываем в другой файл, если указано output = filename + ".css" if output == true if output != "" #Создаём файл для записи exfile = File.new output, "w+" #Записываем содержимое exfile.write @css #Закрываем файл exfile.close end end #Доступ на чтение attr_reader :cssv, :css, :variables end

Если при создании класса мы укажем вторую переменную, то наш скрипт создаст новый файл и запишет туда весь результат работы.

Вы заметили, что мы не реализовали метод parse_cssv. Правильно заметили, поэтому приступаем:

#Обрабатываем файл def parse_cssv #Находим секцию переменных vars = @css.scan(/\/\*@(.*?)@\*\//m)[0].to_s.strip #Останавливаем обработку, если ничего не найдено break if vars == nil #Обрабатываем переменные vars.each_line do |line| #Пропускаем комментарии next if line.strip[0] == "#" #Разбиваем по символу равенства (имя - значение) line = line.split "=" #Пропускаем, если плохой массив next if line.length != 2 #Добавляем в массив @variables[line[0].strip] = line[1].strip end #Производит замены переменных @variables.each do |name, value| #Тра-ля-ля! @css.gsub!(/@@#{name}/, value) end end

Класс готов! Вызовем его методы на наш файл, который, допустим, называется default.cssv:

#Создаём экземпляр класса mycss = CSSV.new "default.cssv", true #Выводим наш CSS puts mycss.css

В итоге наш CSS-файл превратится вот в это:

/*@ #Цвет документа document_color = #fff #Фон подвала footer_color = #eeeeee @*/ div#mydiv { color: #fff; } .footer { background: #eeeeee; color: #fff }

Приключения заканчиваются

Ну вот и всё на сегодня, уважаемые читатели. Получилась вот такая маленькая новонедельная забава. Удачной недели вам, следите за новостями.

Miscђka

01 июля 2008 г.11:09

Можно пример случая, когда нам нужны эти самые переменные в CSS?

Да и: раз есть переменные, то где операторы и методы преобразования?

Дин автор

01 июля 2008 г.11:13

Самый простой пример — это большое количество цветов в документе и чем разбрасывать их по всему документу, их можно хранить централизованно, не вдаваясь в подробности и иные вехи промахов.

Конечно, конечно, в любом редакторе есть функция Find & Replace, но, согласись, что так гораздо приятнее и удобнее всё это делать.

Операторы и методы преобразования тут сильно не нужны, так как они играют лишь роль аггрегаторов для централизации данных.

01 июля 2008 г.13:32

Тогда лучше называть их константами :)

Sannis

01 июля 2008 г.13:50

Штука хорошая, нужно реализовать и заставить верстальщиков ей пользоваться.

P.S. А ещё можно убирать этот комментарий из финального документа, он уже не нужен :)

01 июля 2008 г.15:15

Sannis, ты подал хорошую идею, но я на неё посмотрел под другим углом: надо к заменяемому тексту приписывать комментарий, в котором будет указано, какая тут была переменная. Хе-хе. :-)

Enumerate

Новонедельные забавы

В грот!

Галереи

Приключения заканчиваются

Мнения (5)

Я тоже знаю!