Вы здесь

Css Dry

Служебный модуль, который позволяет использовать DRY CSS.

Модуль 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;}

Группа проекта: