利用CSS vs Sass（SCSS） - 基類問題和redundency

我想通過使用SCSS來清理我的CSS，使其更清潔。利用CSS vs Sass（SCSS） - 基類問題和redundency

標準CSS：

.dark-hr, 
.light-hr { 
    width: 100%; 
    height: 1px; 
    margin: 15px 0px; 
} 
.dark-hr { 
    background-color: #595959; 
} 
.light-hr { 
    background-color: #cccccc; 
}

VS SCSS：

.generic-hr { 
    width: 100%; 
    height: 1px; 
    margin: 15px 0px; 
} 
.dark-hr { 
    @extend .generic-hr; 
    background-color: #595959; 
} 
.light-hr { 
    @extend .generic-hr; 
    background-color: #cccccc; 
}

有什麼辦法，以避免創建將不使用的 '通用小時' 級？我希望某種巢能很好地工作。在這種情況下，CSS絕對比SCSS更乾淨，更易讀。

理想情況下，我需要這SCSS工作：

.## { 
    // base class that is not outputted 
    .dark-hr { 
    //attributes the extend the base class '.##' 
    } 
    .light-hr { 
    //attributes the extend the base class '.##' 
    } 
}

OUTPUT：

.dark-hr, .light-hr { 
    //shared attributes defined by '.##' 
} 
.dark-hr { 
    // overrides 
} 
.light-hr { 
    // overrides 
}

來源

2013-02-06 DynamicDan

您可以使用'[class * =' - hr']'，它基本上表示任何具有'-hr'的類，至少不需要'@ extend'每次，如果你選擇添加更多'。-hr'類，你將不會n eed編輯/擴展任何東西 – ashley

@ashley您*可以*這樣做，但如果您需要添加一個沒有「-hr」後綴但擴展了'.light-hr'的類，會發生什麼？你必須記住延長'[class * =' - hr']'，如果項目已經擱置了幾個月，這很容易被遺忘。 – cimmanon

什麼你」重新想要使用的是一個擴展類（我稱之爲「無聲類」），這是通過使用%而不是.來表示。

hr%base { 
    width: 100%; 
    height: 1px; 
    margin: 15px 0px; 
} 
.dark-hr { 
    @extend hr%base; 
    background-color: #595959; 
} 
.light-hr { 
    @extend hr%base; 
    background-color: #cccccc; 
}

來源

2013-02-06 12:40:23 cimmanon

難道你通常做這樣的事情：

.generic-hr { 
    width: 100%; 
    height: 1px; 
    margin: 15px 0px; 
    &.dark { 
    background-color: #595959; 
    } 
    &.light { 
    background-color: #cccccc; 
    } 
}

來源

2013-02-06 10:38:48 StuR

這將在輸出中包含'.generic-hr'。見@ cimmanon的答案。 – Owen

我對這種事情模式是一個混合：

@mixin generic-hr { 
    width: 100%; 
    height: 1px; 
    margin: 15px 0px; 
} 
.dark-hr { 
    @include generic-hr; 
    background-color: #595959; 
} 
.light-hr { 
    @include generic-hr; 
    background-color: #cccccc; 
}

這具有可擴展的，所以如果你發現自己需要幾個選擇與真正的相似性，你可以添加額外的好處變量：

@mixin generic-hr($background-color: transparent) { 
    width: 100%; 
    height: 1px; 
    margin: 15px 0px; 
    background-color: $background-color; 
} 
.dark-hr { 
    @include generic-hr(#595959); 
} 
.light-hr { 
    @include generic-hr(#cccccc); 
} 
.medium-hr { 
    @include generic-hr(#818181); 
}

來源

2013-02-08 21:28:47 axoplasm

也是一個很好的解決方案。我更喜歡擴展答案，因爲A）mixins通常在它們自己的文件中，B）更接近我原來需要的解決方案。然而，您的解決方案**可能**代表更少的代碼希望我可以將2個答案標記爲正確。 :( – DynamicDan

利用CSS vs Sass（SCSS） - 基類問題和redundency

回答

相關問題