DRY'ing多3 SASS

Question

列列出我有以下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'ing這個嗎？如果不是像h3這樣的內部元素，名字，位置，幹什麼，它會非常簡單。你的回答將有助於更多瞭解你可以用SASS做什麼來保持你的代碼乾爽。

Answer 1

我將這個從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