Mostafa Talebi Mostafa Talebi - 13 days ago 5
CSS Question

How to pass parameters to css classes

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

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


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.

Answer

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;
}

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

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