如何传递参数到css类 [英] How to pass parameters to css classes

问题描述

我想知道是否可以通过以下方式为css添加一些灵活性：

I want to know is it possible to add some flexibility to css via this:

<div class='round5'></div>

其中 .round 角和5确定半径的量。是否可以？

where .round is a class with round corners and '5' determines the amount of radius. Is it possible? I have seen some where, but I don't know how the implementation takes place.

推荐答案

您不能定义边框半径与其值分离，因为它是所有一个属性。有没有办法告诉一个元素有圆角一般，而没有指定多少来舍入它们。

You can't define the border radius separate from its value because it's all one property. There's no way to tell an element to have rounded corners "in general" without also specifying how much to round them by.

但是，你可以做一些类似的多个类和不同的属性：

However, you can do something kind of similar with multiple classes and different properties:

HTML：

<div class="rounded blue"></div>
<div class="rounded green"></div>

CSS：

.rounded {
    border-radius: 5px;
}
.blue {
    background: blue;
}
.green {
    background: green;
}

.rounded 类添加边框半径， .blue 和 .green 类添加背景颜色。

The .rounded class adds the border radius and the .blue and .green classes add the background color.

（我喜欢对这些类进行命名和排序，以便它们在逻辑上进行读取，例如< div class =large box>< / div> 等）。

(I like to name and order the classes such that they read logically, like <div class="large box"></div>, etc.).

这篇关于如何传递参数到css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！