This project is not covered by Drupal’s security advisory policy.

Css Dry allows you to write css without repeating yourself all the time.

The co-maintainers for this modules are Allain Lalonde and Kris Khaira. Allain wrote the core class of CssDry: CSSProcessor. Which he published at his blog and I then picked up, tweaked and made into a Drupal module.

Take the following hypothetical example:

(For a more complete example see this gist.)

#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;
}

There is a lot of repetition going on in the above example. Both the #header and the #primary selector gets repeated so much that it’s silly. I think that the best way to illustrate how cssdry works is to show how the same css would be expressed with 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;
    }
  }
}

The above dry css generates the following css rules after processing:

#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;}

For a more complete example see this gist.

Project information

Releases