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

30 июня 2008 года, 23:18

С опозданием ровно в один день я всё-таки опубликую новые забавы, которые, я напоминаю, были открыты материалом о дескриптивном 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 }

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

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

Мнения (5)

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

  • Miscђka

    01 июля 2008 г.11:09

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

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

  • Дин автор

    01 июля 2008 г.11:13

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

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

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

  • Miscђka

    01 июля 2008 г.13:32

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

  • Sannis

    01 июля 2008 г.13:50

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

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

  • Дин автор

    01 июля 2008 г.15:15

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

Я тоже знаю!

Для обращения к человеку используйте символ @, после которого следует имя того, к кому обращаетесь (пробелы заменяются на знак подчёркивания). Если вам интересно, можете подписаться на комментарии по RSS или по эл. почте. Ведите себя достойно, вы же не роботы, правда?

Вы можете использовать следующие XHTML-элементы в разметке комментария: strong, em, span[class=crossline], a[href=uri], code[type=язык], blockquote, ul и ol. В качестве языка кода может быть указан, например, javascript или css.