CSS class name parameters?

Question

Is there a more efficient way to declare and use these (very similar / duplicate) 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 like:

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

And the actual use of the class

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

Any suggestions are welcome, including using jquery or an alternative styling method ...

Answer 1

you should look at the sass / compass solutions that are designed for this. They also have arithmetic operations and support for variables and colors.

Answer 2

, css, . , jquery. , SetRoundedCorners (, ) - :

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

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

, - . !

EDIT: jquery, :

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

: http://www.malsup.com/jquery/corner/

Answer 3

, - ...

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

CSS... CSS . , , , (PHP)

Using the compiler, you can define variables, loops, add / subtract / multiply, etc., and also (if you are hardcore) create dynamic color palettes by manipulating the RGB of your "known" colors. if you need a color that is 10% lighter, 50% darker, or vice versa.