Possible to pass arguments to CSS classes?

Question

I have a div like this:

<div class="center small-top-margin">
  <%= rails code %>
</div>

where `small-top-margin' is as follows:

.small-top-margin {
    margin-top: 2em;
}

Is there a way to pass an argument to a css class such that

class="top-margin(2) #=> margin-top: 2em;
class="top-margin(5) #=> margin-top: 5em; etc..

or even better

class="margin(top, 2) #=> margin-top: 2em;

I've included Rails tags in case there's a way to do this through rails, although a purely css/sass solution would be better.

No. I highly doubt it. SASS works by compiling CSS, but `class="identifier"` is not CSS. It is HTML, and it is likley contained in an `ERB` file. You pass arguments to CSS via naming structures, like `top-margin-2`, and you can create dynamically named classes from within SASS: http://stackoverflow.com/questions/16496353/create-dynamic-class-names-using-while-loop — Damien Roche, Nov 07 '13 at 08:50

score 6 · Accepted Answer · answered Nov 07 '13 at 08:50

No. But you can generate a reasonable number of pre-built classes:

.top-margin-2 {
    margin-top: 2em;
}
.top-margin-5 {
    margin-top: 5em;
}

Then you can generate your HTML with class="top-margin-#{margin}"

This is not usually a good thing, but if you really need it, it's possible. I urge you though to reconsider and ask what you really want; CSS classes should be semantically meaningful, otherwise you might as well directly apply the CSS on the elements' style attribute. What does 2em mean to you? What is 5em?

you're right about 'might as well directly apply' to the style attr. Was more interested if there was a way I could minimize CSS classes, but again you're right - reasonable number seems like the best way to go. — dax, Nov 07 '13 at 09:27

score 0 · Answer 2 · answered Nov 07 '13 at 08:50

0

No it is not possible.

Use LESS or SASS to achieve this.

answered Nov 07 '13 at 08:50

codingrose

15,563
11
39
58

score -1 · Answer 3 · answered Mar 27 '14 at 07:30

You can pass parameters to CSS file by using php. 1. Create your style by name style.php as:

<?php
/*** set the content type header ***/
header("Content-type: text/css");
/** set the  color ***/
$page = $_GET['page'];
$font_size = $_GET['font_size'];
if($page==1){
  $color = 'red';
}else{
  $color = 'yellow';
}
?>
#test{
  color:<?=$color;?>;
  font-size:<?=$font_size;?>;
}

In html file call style.php and pass parameter to it

\link rel="stylesheet" media="screen" type="text/css" href="/css/style.php?page=1&font_size=35px"/>

div id="test">Test test /div>

Possible to pass arguments to CSS classes?

3 Answers3

Linked