可以传递参数给CSS类？ [英] Possible to pass arguments to CSS classes?

问题描述

我有这样的div：

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

其中`small-top-margin'如下：

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

有一种方法可以将参数传递给css类， p>

class =top-margin（2）＃=> margin-top：2em;

class =top-margin（5）＃=> margin-top：5em ;
等。

或更好

class =margin（top，2）＃=> margin-top：2em;

我已经包括 Rails 标签，以防万一有办法做到这一点通过rails，虽然纯css / sass解决方案会更好。 p>

解决方案

否。但您可以生成合理数量的预构建类：

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

然后您可以使用 class =top-margin - ＃{margin}

这通常不是一件好事， ， 这是可能的。我敦促你，但要重新考虑，询问你真的想要什么; CSS类应该在语义上有意义，否则你可能直接应用CSS的元素的样式属性。 2em 对你意味着什么？什么是 5em ？

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

这篇关于可以传递参数给CSS类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！