CSS Class name parameters?

Question

Is there a more efficient way of declaring and using these (very similar/repetitive) CSS classes:

div.rounded20
{
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
}

div.rounded15
{
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
}

Say maybe with something along the lines of:

div.rounded(@Y)
{
  -webkit-border-radius:@Ypx;
  -moz-border-radius:@Ypx;
}

And the actual class usage being

<div class="rounded(15)" ...>

Any suggestions are welcomed, including using jquery or an alternate styling method...

Answer 1

you should look at sass/compass solutions which are designed to do exactly that. They also have arithmetic operations and support for variables and colors.

Answer 2

i don't believe there's a way to do that with straight css, as it is static. however, there's definitely a way to do it with jquery. you can set a named function, say SetRoundedCorners(element, radius) and do something like this:

function SetRoundedCorners (element, radius) {
    $(element).css("-webkit-border-radius:" + radius +";
 -moz-border-radius:" + radius +";");
}

$("#myelement").click(function(){
    SetRoundedCorners(this, someRadius);
});

haven't tested it, but something along those lines should work. good luck!

EDIT: There's also a jquery function you could use to round the corners:

$(document).ready(function(){
 $("#box1").corner();
});

which can be found here: http://www.malsup.com/jquery/corner/

Answer 3

Maybe something like this...

HTML:

<div class="rounded 15"></div>
<div class="rounded 45"></div>

jQuery:

$("div.rounded").each
(
    function()
    {
        // Calculate the radius as the number at the end of the class name.
        var radius = $(this).attr("class").replace(/^.*?(\d+)$/, "$1");

        // Set both CSS properties to the calculated radius.
        $(this).css({"-webkit-border-radius": radius + "px", "-moz-border-radius": radius + "px"});
    }
);

Answer 4

I use a CSS compiler... that basically generates your CSS files for you. The one I use is proprietary but it works very similar to this one (PHP)

By using a compiler you can define variables, loops, add/subtract/multiply etc. as well as (if you are hardcore) build dynamic color palletes by manipulating the RGB of your "known" colors.. e.g. if you want a color that is 10% lighter, 50% darker, or the inverse.