How SASS CSS preprocessors can make for complex CSS

The CSS processor SASS allows one to write CSS rules in a nested format. It looks reasonable….

.primary_logs {
   position: absolute;
   top: 7em;
   left: 2em;
   right: 2em;
   bottom: 2em;
   h2 {
      padding: 1.2em;
      color: $body-copy;
      margin: 0;
      font-weight: 400;
      font-size: 1.2em;
   }
   #entries, #controls {
      position: relative;
      height: 100%;
      background: $body-bg-plain;
      box-shadow: 1px 2px 4px 2px $body-shadow;
      font-family: "Open Sans";
   }
   #controls {
      margin-left: 2em;
   }
}

…but results in fragile hard to maintain CSS rules - see use a flat hierarchy.

Concepts

How SASS CSS preprocessors can make for complex CSS

Analytics

Related content