可以将参数传递给 CSS 类吗？ [复制]答案

【问题标题】：Possible to pass arguments to CSS classes? [duplicate]可以将参数传递给 CSS 类吗？ [复制]
【发布时间】：2013-11-18 19:49:41
【问题描述】：

我有一个这样的 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 解决方案会更好。

【问题讨论】：

不能作为参数发送到 css 类
没有。我对此表示高度怀疑。 SASS 通过编译 CSS 工作，但 class="identifier" 不是 CSS。它是 HTML，并且可能包含在 ERB 文件中。您可以通过命名结构将参数传递给 CSS，例如 top-margin-2，并且您可以在 SASS 中创建动态命名的类：stackoverflow.com/questions/16496353/…

标签： html css ruby-on-rails ruby-on-rails-4 sass

【解决方案1】：

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

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

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

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

【讨论】：

你是对的'最好直接应用'到样式属性。如果有一种方法可以最小化 CSS 类，我会更感兴趣，但你又是对的 - 合理的数字似乎是最好的方法。

【解决方案2】：

不，这是不可能的。

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

【讨论】：

【解决方案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?page=1&font_size=35px"/>

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

【讨论】：