最佳實踐：在薩斯

築巢給定的CSS什麼是「最好的Sass的方式窩下面的CSS？最佳實踐：在薩斯

.summary-features a, 
.summary-description a, 
.price .element_prijs1 { 
    font-weight: $font-weight-bold; 
}

來源

2016-12-23 AlbertVR

給它因爲它是，以避免不必要的複雜性和/或冗餘。沒有最好的嵌套，但只有'正確'和'不正確'的語義。

在您的例子中，你可能會迫使像通過尼拉姆和吉榮描述的嵌套，但這將在帶來冗餘性和可維護性因此惡化。另一種選擇，只是爲了演示與語義的東西，是爲了避免冗餘，像這樣做：

.summary-features, 
.summary-description, 
.price { 
    a, .element_prijs1 { 
    font-weight: $font-weight-bold; 
    } 
}

不具有相同的語義爲你的CSS代碼段。這種方式也.pricea元素將得到大膽和.summary-features和.summary-description.element_prijs1。再說一遍：就這樣保持原樣，不要將嵌套作爲結束。它仍然是有效的Sass代碼。

來源

2016-12-23 12:16:00 Marvin

我絕不是所有事物的專家SASS，然而，這是築巢的青菜選擇的一種方式：

.summary-features, 
.summary-description { 
    a { 
     font-weight: $font-weight-bold; 
    } 
} 

.price { 
    .element_prijs1 { 
    font-weight: $font-weight-bold; 
    } 
}

來源

2016-12-23 12:00:20

謝謝您的答覆。 '問題'我與這些解決方案的主要原因是我發現原始代碼'更好'，因爲它的代碼少？ – AlbertVR

@JordyVR如果你喜歡老式的CSS然後通過各種手段繼續使用它，我已經提供了比提供的答案（這是無效，可能我想補充）解決你的問題，其他的就沒有辦法使代碼「少」爲你。這些是最好的解決方案。如果你想使用Sass，那麼所提供的答案是可行的，並且是最佳實踐。然而，我會補充說，當預編譯後輸出代碼時，它看起來像CSS，Sass的優勢在於您可以嵌套並查看選擇器。 –

我相信這將是最好的：

.summary-features, .summary-description { 
 
    a { 
 
     font-weight: $font-weight-bold; 
 
    } 
 
} 
 
.price { 
 
    .element_prijs1 { 
 
     font-weight: $font-weight-bold 
 
    } 
 
}

來源

2016-12-23 12:03:05

最佳實踐：在薩斯

回答

相關問題