Русские документы
Ежедневные компьютерные новости RSS rusdoc.ru  Найти :
Новости
Последние поступления
Книжный магазин
  Hardware:
Видеоустройства
Системные платы
Процессоры
Мобильные устройства
Аудиосистема
Охлаждение системы
Накопители информации
КПК и ноутбуки
Телефоны и связь
Периферия
Система
Сети
Разные устройства
 
  Programming:
Web-разработка
Языки программирования
Технологии и теория
Разработка игр
Программная инженерия
 
  Software:
Операционные системы
Windows 7
Базы данных
Обзоры программ
Графика и дизайн
   
  Life:
Компьютерная жизнь
Разные материалы
   
Партнеры
Публикация
Правовая информация
Реклама на сайте
Обратная связь
Экспорт в RSS Экспорт в RSS2.0
    Читать в Яндекс.Ленте



Динамический CSS?

Раздел: Programming / Вебмастеру @ 13.10.2009 | Ключевые слова: xCSS css OO CSS php sass версия для печати

Автор: rumkin
Источник: habrahabr

xCSS PHP Class Я давно ждал этого момента, нет честно, где-то в подкорке я очень-очень хотел такой штуки чтобы было удобно писать на CSS без переписывания похожих стилей по два раза, без выыскивания нужных разделов в собственном коде, в общем хотелось чтобы на CSS можно было работать легко и просто, что-то я затянул…И так встречайте xCSS — php-класс для работы с динамическим CSS.
Заранее прошу прощения за вёрстку что-то у нас с Хабром в этот раз не заладилось (
Как я уже писал выше, xCSS — это класс для работы с динамическим CSS. Автор вдохновлённый идеей OO CSS и SASS (да-да, для Ruby уже есть такая штука) создал класс, который позволяет работать с CSS динамически: разработчику доступны переменные, классы, вложенные селекторы и прототипирование.
Что же даёт нам xCSS при первом рассмотрении? Во-первых, позволяет избежать путаницы в коде с помощью вложенных селекторов, во-вторых, позволяет избавиться от необходимости править всю таблицу стилей, если понадобилось поменять какие-то значения, в-третьих, сократить количество кода избавившись от повторяющихся правил, в-четвёртых, минимизировать код. Плюсы на лицо, теперь давайте познакомимся с xCSS поближе.

Переменные


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

	$path_ = /images/icons;

	$basicColor_ = #ffcc00;

	$headerFonts_ = Arial, Tahoma, Verdana

}

#downloads {

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

	border-left: $basicColor_;

}



h1 {

	color: $basicColor_;

}

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

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


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

    a {

	    color: $basicColor;

    }

    .price {

	    color: $priceColor;

	    font-size: 2em;

    }

    .buy {

	    background-color: $attentionColor;

    }

    // … и т.д. И т.п.

}

На выходе получим:
li.product a {

		color: $basicColor;

}

li.product	 .price {

	color: $priceColor;

	font-size: 2em;

}

li.product .buy {

		background-color: $attentionColor;

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

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

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


Возьмём три товара обладающих идентичным расположением элементов, но разными цветовыми схемами, например, обычный товар, бест-селлер и новинка. Сначала мы создадим прототип для обычного товара:
.product {

    self {

        min-width: 200px;

        min-height: 300px;

    }

    h1 {

        padding-bottom: 1em;

        color: $headersLight;

    }

}



.bestSeller extends .product {

    self {

        background-color: $productBestBg_;

    }



    h1 {

        color: $productBest_;

    }

}

.new extends .product {

    self {

        background-color: $productNewBg_;

        background-image: url($path/new_bg.png);

    }

    h1 {

        color: $productNew_;

        font-size: 1.2em;

        padding-bottom: 1.8em;

    }

}
В рузельтате мы получим набор всех необходимых правил:
.new,

.bestSeller,

.product {

        min-width: 200px;

        min-height: 300px;

}

.new h1,

.bestSeller h1,

.product h1 {

        padding-bottom: 1em;

        color: $headersLight;

}

.new h1 {

        color: #00ffcc;

        font-size: 1.2em;

        padding-bottom: 1.8em;

}

.new {

        background-color: #0000cc;

        background-image: url(/storage/images/new_bg.png);

}

.bestSeller {

        background-color: #ff33cc;

}

.bestSeller h1 {

        color: #ff00cc;

}

Как видите при использовании xCSS мы избежали дублирования имён классов (кроме имени прототипа) и при смене имени класса нам

PHP


Теперь о php-составляющей и о том как прикрепить это чудо к вашему проекту.
  1. Кидаем файл xcss-class.php в библиотеку.
  2. В папке с xCSS-файлами создаём скрипт index.php и вставляем туда код:
    $config = array();
    
    $config[`path_to_css_dir`] = `../`; // это рут для css и xcss директорий
    
    
    
    $config[`xCSS_files`] = array (
    
    	`styles/main.xcss`		=> `generated/main.css`,
    
    //	имя файла xcss		=>  сохранить как
    
    );
    
    
    
    $config[`master_file`] = true;	// Использоват мастер-файл (файл в который будут включены все стили), по умолчанию true
    
    $config[`master_filename`] = `master.css`;	// соответственно имя мастер-файла, по умолчанию `master.css`
    
    
    
    $config[`reset_files`] = array  (
    
    	`static/reset.css`, // Стили сбрасывающие дефолтные настройки браузеров
    
    );
    
    
    
    $config[`hook_files`] = array  (
    
    	`static/hooks.css: screen`, // Файлы для других медиа-типов (могу ошибаться)
    
    );
    
    
    
    $config[`construct_name`] = `self`;	// Имя элемента внутри себя, по умолчанию `self`
    
    
    
    $config[`compress`] = true;	// Удалять лишние пробелы, по умолчанию false
    
    $config[`debugmode`] = false;	// Включает режим отладки, по умолчанию false
    
    
    
    $config[`disable_xCSS`] = false; // Отключает xCSS, по умолчанию false
    
    $xCSS = new xCSS($config);
    
    $xCSS->compile();
  3. Вставляем в заголовок HTML-страницы: Он обращается к файлу xcss/index.php, который собирает xCSS в CSS,затем подключаем мастер-файл:/>
  4. Отдыхаем.

От автора


Конечно я не использовал бы xCSS так как предлагает автор, а склеил бы все необходимые стили в один файл, сжал gzip`ом и закинул в кэш, а xCSS использовал бы только при разработке.
Спасибо за внимание!

Ссылки








версия для печатиРаспечатать статью


Вернуться в раздел: Programming / Вебмастеру


Реклама:
Читать наc на:

Add to Google
Читать в Яндекс.Ленте






Rambler's Top100
© Copyright 1998-2012 Александр Томов. All rights reserved.