我们可以参数化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样式吗？

回答

相关问题