CSS 类名参数？答案

【问题标题】：CSS Class name parameters?CSS 类名参数？
【发布时间】：2009-06-11 15:40:27
【问题描述】：

是否有更有效的方式来声明和使用这些（非常相似/重复的）CSS 类：

div.rounded20
{
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
}

div.rounded15
{
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
}

也许可以这样说：

div.rounded(@Y)
{
  -webkit-border-radius:@Ypx;
  -moz-border-radius:@Ypx;
}

而实际的类用法是

<div class="rounded(15)" ...>

欢迎提出任何建议，包括使用 jquery 或其他样式方法...

【问题讨论】：

不使用纯 CSS，但 Ryan 提供了一个不错的框架答案
Ryan Oberoi 提出了一个很好的建议，但对于我的小型 ASP.NET MVC Web 应用程序来说，这有点过头了。我喜欢 Lobstrosity 的想法，因为它可以应用于任何类标签，而且它简短而简单……正是我所需要的。两者都是很好的答案，但一个解决了一般问题（涉及 css 框架），另一个解决了我的特定需求......我想我应该选择 Ryan 的回复作为解决方案，因为它可能会帮助其他人更多......有什么建议吗？

标签： css class parameters

【解决方案1】：

您应该查看专门为此而设计的 sass/compass 解决方案。它们还具有算术运算并支持变量和颜色。

【讨论】：

从未听说过这些。 wiki.github.com/chriseppstein/compass 和 haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html 对吗？ @Ryan，如果您添加一些使用它们的经验，那就太好了。对我来说很有趣而且是全新的。
Sass 和 Haml 的创建是为了简化 html 和 css 样式。主要来自 Rails 背景，其中安装的插件和/或 gems 会自动生成 html 和 css 文件。 Compass 是一个建立在 sass 之上的框架，它简化了 Blueprint 等 CSS 框架的集成。如果您使用的是其他语言，则可以使用命令行工具从 .sass 文件生成 .css。
有趣的想法，虽然这两个都是基于 ruby 的解决方案，而且我正在 ASP.NET 上编写一个简单的网站。我知道最后 css 是独立于平台的，但我认为这些工具更面向 ruby/php，不是吗？这是我关于 CSS 作为一种主动语言而不是简单的静态声明的主要问题的一个很好的解决方案，但对于我正在从事的小型项目来说，这肯定是矫枉过正（我是开发人员而不是设计师，所以这就是我感兴趣的地方重用和简化 css 代码的来源）。
使用 css2sass 和 sass2css。并且不用担心工具的导轨方向。除非您在 .NET 世界中找到更好的工具。

【解决方案2】：

我不相信有办法用直接的 css 来做到这一点，因为它是静态的。但是，绝对有办法用 jquery 来做到这一点。您可以设置一个命名函数，例如 SetRoundedCorners(element, radius) 并执行以下操作：

function SetRoundedCorners (element, radius) {
    $(element).css("-webkit-border-radius:" + radius +";
 -moz-border-radius:" + radius +";");
}

$("#myelement").click(function(){
    SetRoundedCorners(this, someRadius);
});

尚未对其进行测试，但类似的东西应该可以工作。祝你好运！

编辑：还有一个 jquery 函数可以用来圆角：

$(document).ready(function(){
 $("#box1").corner();
});

可以在这里找到：http://www.malsup.com/jquery/corner/

【讨论】：

感谢您的建议，但我尝试了所有我能找到的 jquery 圆角解决方案，但没有一个可以解决这种情况（图像顶部带有图像背景的圆形 div）：curvycorners.net/includes/examples/demo2.html .. . 正如您在该示例中看到的那样，curvycorners.net js 实现正在解决这个问题，这是我最终选择使用的解决方案。

【解决方案3】：

也许是这样的......

HTML：

<div class="rounded 15"></div>
<div class="rounded 45"></div>

jQuery:

$("div.rounded").each
(
    function()
    {
        // Calculate the radius as the number at the end of the class name.
        var radius = $(this).attr("class").replace(/^.*?(\d+)$/, "$1");

        // Set both CSS properties to the calculated radius.
        $(this).css({"-webkit-border-radius": radius + "px", "-moz-border-radius": radius + "px"});
    }
);

【讨论】：

【解决方案4】：

我使用 CSS 编译器...基本上可以为您生成 CSS 文件。我使用的是专有的，但它的工作方式与 this one (PHP)

非常相似

通过使用编译器，您可以定义变量、循环、加/减/乘等，以及（如果您是铁杆玩家）通过操纵“已知”颜色的 RGB 来构建动态调色板。例如如果您想要一种浅 10%、深 50% 或相反的颜色。

【讨论】：