Question

I have the following SASS code:

ul {

  &.threeColList1 {
    margin: 30px auto 0 auto;
    padding: 0;
    list-style: none;
    width: 775px;
    li {
      width: 225px;
      height: 330px;
      float: left;
      text-align: left;
      margin-right: 50px;
      .name {
       margin-bottom: 5px;
      }
      .position {
        margin-top: 0;
        font-weight: bold;
      }
      &.last {
        margin-right: 0;
      }
    }
  }

  &.threeColList2 {
    margin: 0 auto;
    padding: 0;
    list-style: none;
        width: 850px;
    li {
      width: 225px;
      height: 175px;
      float: left;
      text-align: left;
      margin-right: 75px;

      h3 { font-size: 1.5em; }
      p { font-size: 1.2em; }
      &.last {
        margin-right: 0;
      }
    }
  }
}

How would you approach DRY’ing this up? If it weren’t for the inner li elements such as h3, name, position, DRY’ing it would be pretty straight forward. Your answer will be helpful in understanding more about what you can do with SASS to keep your code DRY.

Answer 1

I converted this from scss to sass format, but I think it should be straightforward enough.

The basics are I would rework the classes on the html to be a little less specific and then just pull things out as it makes sense.

Here’s the full refactor:

ul
  &.threeCol
    padding: 0
    list-style: none
    margin: 0 auto
    li
      width: 225px
      float: left
      text-align: left
      &.last
        margin-right: 0

  &.list1
    margin-top: 30px
    width: 775px
    li
      height: 330px;
      margin-right: 50px;
      .name
        margin-bottom: 5px
      .position
        margin-top: 0
        font-weight: bold

  &.list2
    width: 850px
    li
      height: 175px
      margin-right: 75px
      h3
        font-size: 1.5em
      p
        font-size: 1.2em