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

Question

我有一个这样的div：

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

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

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

有没有办法将参数传递给css类，这样

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 解决方案会更好。

Answer 1

不，但是您可以生成合理数量的预构建类：

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

然后你可以生成你的HTMLclass="top-margin-#{margin}"

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

Answer 2

不，这是不可能的。

使用LESS或SASS来实现这一点。

Answer 3

您可以使用 php.ini 将参数传递给 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;?>;
}

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

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

   div id="test">测试测试 /div>