Question

我有这样的div：

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

其中`小顶边＆＃39;如下：

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

有没有办法将参数传递给css类，以便

class="top-margin(2)＃=＆gt; margin-top: 2em;
class="top-margin(5)＃=＆gt; margin-top: 5em; 等。

甚至更好

class="margin(top, 2)＃=＆gt; margin-top: 2em;

我已经添加了Rails个标签，以防通过rails实现这一目标，尽管纯粹的css / sass解决方案会更好。

Answer 1

没有。但是你可以生成合理数量的预建类：

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

然后，您可以使用class="top-margin-#{margin}"

生成HTML

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

Answer 2

不，这是不可能的。

使用LESS或SASS来实现此目标。

Answer 3

您可以使用php将参数传递给CSS文件。 1.按名称style.php创建样式：

<?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;?>;
}

在html文件中调用style.php并将参数传递给它

\ link rel =“stylesheet”media =“screen”type =“text / css” HREF = “/ CSS / style.php页= 1＆安培; FONT_SIZE = 35px”/＆GT;

div id =“test”＆gt;测试test / div＆gt;

可以将参数传递给CSS类吗？

3 个答案: