Главная / Мой вордпресс / CSS переменные

CSS переменные

css переменныеПонятие “css переменные” облетело интернет довольно таки быстро с учетом того, что данное нововведение появиться в css3(ждать надо) и было придумано пару очень интерестных решений для “нетерпеливых”.

1.Сss с php

Скажу сразу решение довольно таки простое.
Для начала создаем стилевой файл, но расширение будет не css, а php. Заинтригованы?)

<link rel=stylesheet type=text/css href=style.php />

Теперь, надо будет изменить настройки заголовка той страницы, куда мы собираемся подключать стилевой файлик

<?php
header("Content-type: text/css; charset: UTF-8");
?>

И добавим пару переменных:

$color="#ffffff";
$bg="red";

И теперь эти переменные используем в нашем стилевом файлике:

p
{
color: <?php echo $color; ?>;
background-color:<?php echo $bg; ?>;
}

Вот и все по этому способу.
Честно говоря, как по мне способ интересный и не более=)

2.Переменные в css

Данный способ более похож, на то что будет при выходе css3.
Пример кода:

@define{
   color: #99ccff;
   fontcolor: #ffffff;
}
input{
   background-color: @color;
   color: @fontcolor;
}

С данного кода можно предположить,что надо указать все переменные в блоке define и потом используем данные переменные по всему стилевому файлу.

Но как же реализовать данный способ?

Данная проблема решается с помощью подключения библиотеки CssHandler и все, все работает прекрасно.

Хотел бы сказать,что эти способы можно использовать до выхода css3 и полной поддержки браузерам.

Читайте: Бесплатные фотостоки и бесплатные фотобанки

Есть конечно и другие способы работать с переменными в css, но я описал (с моей точки зрения) оригинальные.

Хотя, лично я не использовал переменные, я считаю для небольших стилей, переменные не нужны(имхо).
Честно говоря в итоге все таки, переменные css-шаг вперед=)

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

Если вы хотите получать уведомления на свой E-mail о появлении новых статей, то рекомендуем вам чуть ниже ввести свой электронный почтовый адрес.