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

not with pure CSS, but Ryan provides a nice framework answer — annakata
– annakata, Commented Jun 11, 2009 at 15:47
Ryan Oberoi makes an excellent suggestion, but it's a bit overkill for my small ASP.NET MVC web application. I like Lobstrosity's idea since it could apply to any class tag and its short and simple... just what I need. Both are good answers yet one solves the general question (involving a css framework) and the other one solves my specific need... I guess I should select Ryan's response as the solution as it would probably help others more... any suggestions? — Rodolfo G.
– Rodolfo G., Commented Jun 12, 2009 at 1:35

Ryan Oberoi · Accepted Answer · 2009-06-11 15:44:41Z

4

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.

answered Jun 11, 2009 at 15:44

Ryan Oberoi

14.6k2 gold badges27 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

artlung Over a year ago

Never heard of these either. wiki.github.com/chriseppstein/compass and haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html right? @Ryan it'd be great if you added a bit of your experience using those. Interesting and brand new to me.

Ryan Oberoi Over a year ago

Sass and Haml were created to simplfy html and css styling. Mostly coming from a rails background, where the plugins and/or gems installed automate the generation of html and css files on the fly. Compass is a framework built on top of sass, which simplifies integrating CSS frameworks like Blueprint. You can use command line tools to generate the .css from .sass files if you are using in other languages.

Rodolfo G. Over a year ago

Interesting idea, although these both are pretty much ruby-based solutions, and I'm programming a simple website on ASP.NET. I know in the end css is platform independent, but I think these tools are more ruby/php oriented, aren't they? This is an excellent solution to my main question regarding CSS as an active language instead of simple static declarations, but it's certainly overkill for the tiny project I'm working on (I'm a developer not a designer, so that's where my interest on reusing and simplyfying the css code is coming from).

Ryan Oberoi Over a year ago

use css2sass and sass2css. and do not worry about where the tool being rails oriented. unless you find better tools in .NET world.

Jason · Accepted Answer · 2009-06-11 15:55:09Z

1

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/

edited Jun 11, 2009 at 15:55

answered Jun 11, 2009 at 15:46

Jason

52.7k38 gold badges139 silver badges188 bronze badges

1 Comment

Rodolfo G. Over a year ago

Thanks for the suggestion, but I tried every jquery rounded corners solution I could find, and none could solve this situation (rounded div with an image background on top of an image): curvycorners.net/includes/examples/demo2.html ... which as you can see on that example is being solved by the curvycorners.net js implementation, which is the solution I finally chose to use.

Lobstrosity · Accepted Answer · 2009-06-11 16:30:12Z

1

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

edited Jun 11, 2009 at 16:30

answered Jun 11, 2009 at 15:58

Lobstrosity

3,93631 silver badges23 bronze badges

Comments

scunliffe · Accepted Answer · 2009-06-11 16:30:52Z

0

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.

answered Jun 11, 2009 at 16:30

scunliffe

63.8k26 gold badges133 silver badges168 bronze badges

Collectives™ on Stack Overflow

CSS Class name parameters?

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related