Модуль Css Dry создан для улучшения процесса написания CSS макета Вашего сайта. Модуль позволяет использовать переменные в css файле Вашей темы для того, чтобы значительно сократить количество повторений значений данных.
Рассмотрим следующий гипотетический пример:
#header ul {margin: 0; padding: 0; text-align: left;}
#header li {float: left; padding: 0 0 0 10px;}
#header #primary {position: absolute; right: 0; bottom: 25px;}
#header #primary li {border-right: 1px solid #000; padding: 0 10px 3px 10px;}
#header #primary li.last {border: none; padding: 0 0 0 10px;}
#header #primary li a {float: left; height: 27px; text-indent: -9999px; outline: none;}В приведенном выше примере Вы можете видеть постоянные повторения значений ряда классов. И это лучший способ продемонстрировать работу модуля cssdry:
$border_color=#000;
#header
{
ul { margin: 0; padding: 0; text-align: left; }
li { float: left; padding: 0 0 0 10px; }
#primary {
position: absolute;
right: 0;
bottom: 25px;
li {
border-right: 1px solid $border_color;
padding: 0 10px 3px 10px;
}
li.last {
border: none;
padding: 0 0 0 10px;
}
li a {
float: left;
height: 27px;
text-indent: -9999px;
outline: none;
}
}
}А как результат после обработки Ваш css выглядит обычным образом:
#header ul{margin: 0; padding: 0; text-align: left;}
#header li{float: left; padding: 0 0 0 10px;}
#header #primary{position: absolute; right: 0; bottom: 25px;}
#header #primary li{border-right: 1px solid #000; padding: 0 10px 3px 10px;}
#header #primary li.last{border: none; padding: 0 0 0 10px;}
#header #primary li a{float: left; height: 27px; text-indent: -9999px; outline: none;}Модуль: http://drupal.org/project/cssdry
Комментарии (1)
Отличный модуль
Отправить комментарий