Сушить несколько списков из 3 столбцов с помощью SASS - PullRequest
Новая
       27

Сушить несколько списков из 3 столбцов с помощью SASS

1 голос
/ 01 ноября 2011

У меня есть следующий код SASS: 

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

Как бы вы подошли к DRY'у? Если бы не внутренние элементы li, такие как h3, name, position, DRY'ing, это было бы довольно просто. Ваш ответ поможет вам лучше понять, что вы можете сделать с помощью SASS, чтобы ваш код оставался сухим.

1 Ответ

1 голос
/ 04 ноября 2011

Я преобразовал это из формата scss в формат sass, но я думаю, что это должно быть достаточно просто.

Основы в том, что я бы переделал классы в html, чтобы они были немного менее конкретными, а затем просто вытащил вещи, как это имеет смысл.

Вот полный рефакторинг: 

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
...