functional-programming - CSS 不支持在样式中应用样式有什么原因吗?

标签 functional-programming css

在 CSS2 甚至即将推出的 CSS3 中,我找不到完全自然且省时的东西 - 从其他样式中应用 CSS 样式,而不是从 HTML 中应用。

例如:

.awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  .alwesome-image; // or something like that - this is similar to a function call in a functional language
  padding: 2px; 
}

很多时候,人们无法访问生成的 HTML,因此修改 CSS 是唯一的选择。

这种继承支持会让生活变得更轻松,因为我们能够将 CSS 规则视为“函数”并重用代码而不是重复代码。

还是我遗漏了什么,而 CSS 确实支持它(我以前从未见过?)或计划支持它?请赐教。

编辑:考虑另一个例子,它表明声明 .awesome-image, .super-awesome-image {common rules} 并不优雅:

.border5 {
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px
}

我宁愿不要在同一定义中堆积所有其他想要具有边界半径的类。唉,这就是在没有功能支持的情况下需要做的事情(我多次提到只能访问 CSS 文件而不是 HTML 本身)。

最佳答案

在 CSS 中,这是按如下方式实现的:

.super-awesome-image, .awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  padding: 2px; 
}

样式可以同时应用于多个类,这样可以轻松继承。

关于 CSS 是否应该被赋予函数式编程技术或层继承的争论很多,但这种类继承的风格可能会保留。

编辑: 如果你可以用 php 生成样式,这样的继承应该是非常可行的。 查看这些脚本(主要处理 CSS 变量,但可能做的更多):

  1. http://www.shauninman.com/archive/2005/08/05/css_variables
  2. http://www.joesapt.net/2005/09/03/08.46.34
  3. http://interfacelab.com/variables-in-css-via-php/
  4. http://www.conditional-css.com/

关于functional-programming - CSS 不支持在样式中应用样式有什么原因吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2092721/

相关文章:

java - 了解 Java 8 Lambda 表达式

javascript - 函数变量和函数内变量具有相同的名称。如何访问?

c++ - 在不知道其元数的情况下绑定(bind)函数的第一个参数

html - 关键帧开始时意外下降

javascript - 为什么我的图库页面加载时间这么长?

functional-programming - 重载函数的 Hindley-Milner 类型推断

while-loop - Kotlin - 将 while 循环转换为函数式样式

html - 页面对齐,如何在手机浏览时将我的页面居中?

jquery - jquery css 函数在 Firefox 和 IE 11 上的奇怪行为

javascript - 光标旁边的图像