我們可以參數化CSS樣式嗎？

我展示一個乾淨的百分比背景感謝這個CSS代碼：我們可以參數化CSS樣式嗎？

.percent { 
    background: linear-gradient(to left, #FFBFBF 10%, #9BF7BF 10%) no-repeat; 
    background-position-y: 45%; 
    background-size: 100% 21px; 
}

我的問題是：我可以parametrised某種方式從HTML中的比例（在此10％）？理想的情況下它可能看起來像<td class="percent(10)">

我能想到的是產生100種.percent CSS樣式和調用從HTML像<td class="percent10">或<td class="percent87">適當的一個唯一的解決辦法，但是這是很醜陋的，不是嗎？

現在呈現的樣子說：

來源

2016-03-15 Patrick from NDepend team

這是典型的應用做了'風格= 「WIDTH：87％」'的進步元素本身... – deceze

但背景由兩種顏色（綠色和粉紅色）組成，如何將寬度的87％應用到半背景，並將100％-87％應用到另一半？ –

粉紅色100％寬的元素，最重要的是一個綠色的元素與不同的百分比，最重要的是與文本「...％」元素... – deceze

最後我實施了醜陋的解決方案。然而，考慮到單元格的數量可能非常大，我認爲我們可以在HTML和CSS文檔中的字符數方面做得更好。

/* Generates somehow these 101 lines */ 
.pct0 { background: linear-gradient(to right, #9BF7BF 0%, #FFBFBF 0%); } 
.pct1 { background: linear-gradient(to right, #9BF7BF 1%, #FFBFBF 1%); } 
(...) 
.pct100 { background: linear-gradient(to right, #9BF7BF 100%, #FFBFBF 100%); } 

/* This don't work if rules below comes before the rules above */ 
.pct0,.pct1, (...) , pct100 
{ 
    background-position: center; 
    background-size: 95% 18px; 
    text-align: right; 
    background-repeat: no-repeat; 
}

HTML使用樣式<td class="pct0"><td class="pct1">，... <td class="pct100">

來源

2016-03-16 08:34:09

一個簡單的方法是如何在概念上接近這一點：

<div style="position: relative; background: #FFBFBF; width: 200px; height: 25px;"> 
    <div style="position: absolute; top: 0; left: 0; background: #9BF7BF; width: 87%; height: 100%;"></div> 
    <div style="position: absolute; top: 0; left: 0;">87%</div> 
</div>

「背景」的div（最外側）有粉紅色顏色;最重要的是，你把一個綠色的div，其width你有所不同，並且最重要的是你將你的百分比寫成文本。

來源

2016-03-15 15:29:50 deceze

謝謝！但是我可以讓許多有關的單元（如成千上萬個）可以工作，但會造成HTML爆發的大小。至少我提出的醜陋解決方案是O（100）而不是O（＃百分比單元） –

您是否確實確認這是一個實際限制...？ – deceze

不，但提出的'醜陋'解決方案更好:) –

我們可以參數化CSS樣式嗎？

回答

相關問題