CODEWITHSUNDEEP
htmlcss
Mostafa Talebi
Mostafa Talebi

Reputation: 9183

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.

Upvotes: 72

Views: 187094

Answers (10)

Amir Doosti
Amir Doosti

Reputation: 56

there is a solution i found you can also make your css classes dynamic to make them reusable. (need scss / sass)

@for $i from 1 through 100 {
.w-#{$i} {
    width: #{$i}px;
}

}

and then you can use them in your template :

<div class="d-flex align-center w-10">

Upvotes: 1

ganiular
ganiular

Reputation: 629

By following the solution by @stwilz and with the accordance of the CSS var() function usage https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties. I was able to make use it as this

.round{
    border-radius: var(--radius, 10px); 
    /* 10px as default value */
}

Then can be use like this

<div class="round">Hello</div>
<div class="round" style="--radius: 20px">Hello</div>

Instead of default value, global value can be set as

:root{
    --radius: 30px;
}

Upvotes: 3

stwilz
stwilz

Reputation: 2397

For anyone stumbling across this in 2018, whilst not fully supported CSS variables now give you the ability to pass a variable directly into your class. 

<div class="round" style="--radius: 100%;"></div>
<style>
  .round {
    display: block;
    height: 40px;
    width: 40px;
    border: 1px solid #BADA55;
    border-radius: var(--radius);
  }
</style>

You can also define root variables and pass them in as well

<div class="round" style="--radius: var(--rad-50);"></div>
<style>
  :root {
    --rad-0: 0%;
    --rad-50: 50%;
    --rad-100: 100%;
  }
  .round {
    display: block;
    height: 40px;
    width: 40px;
    border: 1px solid #BADA55;
    border-radius: var(--radius);
  }
</style>

This is also scoped to the element as well. If you set the --radius in one element is wont effect another element. Pretty jazzy right!

Upvotes: 136

Bariq Dharmawan
Bariq Dharmawan

Reputation: 820

Maybe what you want is like this

CSS

.round {
  border-radius: 4px; /*it's default when you juse using .round*/
}
.round.five {
  border-radius: 5px;
}
.round.ten {
  border-radius: 10px;
}

HTML

<div class="round five">something</div>

Upvotes: 4

Cody Guldner
Cody Guldner

Reputation: 2896

Here is an answer that I came up with that requires a small amount of jQuery, and a small knowledge of Regex.

    $(function() {
      var number = $("div").attr("class").match(/\d+$/);
      $("div").css({
        "width": "100px",
        "height": "100px",
        "background-color": "green",
        "border-radius": number + "px"
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='round54'>hello</div>

The .match() function uses Regex. Regex is used to detect parts of strings. The \d detects any digits. The + matches the previous selector 1 or more times. In other words, the number can be a multi digit number. And the $ means it has to be at the end.

So then the jQuery uses that in the border-radius property later. All you have to do is append px, and you are good to go.

Fiddle

Upvotes: 12

limitlessloop
limitlessloop

Reputation: 1474

You can do what you are saying but you would have to reserve the keyword "round" for only this purpose. If you look at the following.

div[class*="round"] {
    background-color: green;
    color: white;
    padding: 10px;
}

And then targeting specific variants of it using...

div[class="round5"] {
    border-radius: 5px;
}

The first block of code selects all class names which contain the word round, this can be both a good thing and a bad thing.

Upvotes: 1

Oki Erie Rinaldi
Oki Erie Rinaldi

Reputation: 1863

you can do this. but you have to create the css in the html document(not linked, but between the <style> tag). you can use php or javascript to make a loop. for example try this:

<style>
    <?php
    $round = 5;
    for ($round = 50; $round <= 150; $round+=25){

   echo "#round$round{
       height: 300px;
       width: 300px;
       background: #f00;

border-radius : ".$round."px;
    margin: 2px;
}
";

    }
    ?>
</style>
<?php 
for ($round=50;$round<=150; $round+=25){

    echo "<div id='round$round'>

</div>
            ";

}

?>

hope this helps! :D

Upvotes: 4

sanntu
sanntu

Reputation: 83

You can use multiclassing on the element. Eg.:

HTML:

<div class="round">Box without border radius</div>
<div class="round rounded-5">Box with 5px border radius</div>
<div class="round rounded-10">Box with 10px border radius</div>

CSS:

.round {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
}

.round.rounded-5 {
    border-radius: 5px;
}

.round.rounded-10 {
    border-radius: 10px;
}

Upvotes: 7

apaul
apaul

Reputation: 16170

You could do something similar but not exactly the way you've put it.

CSS

.radius{
    border-radius: 10px;
    border: 1px solid red;
}

.r5{
    border-radius:5px;
}

HTML

<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>

Working Example

In the example above the red border will be retained but the border-radius will change.

Note that you don't start class names with numbers, hence r5 rather than 5

Upvotes: 5

daGUY
daGUY

Reputation: 28743

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.).

Upvotes: 13

Related Questions