Модуль Css Dry позволяет писать 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;
}
Здесь много повтором. Посмотрите сколько раз повторяются селекторы #header и #primary, это просто глупо. Вот как может быть выражен тот же CSS-код с использованием Css Dry:
$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 Dry сгенерирует следующие правила 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;}