Question

我一直在寻找LESS（http://lesscss.org/），它为CSS添加了变量和宏特征。这意味着您可以在某处定义RGB颜色，然后通过CSS使用该变量。基本上，它看起来是一个非常酷的解决方案。

然而，这取决于Ruby，它不是我的正常开发堆栈的一部分，所以我想我会问这里是否有人知道我可能能够添加到其他语言中的类似CSS扩展我的工具链更容易？感谢。

Answer 1

recent article in Smashing Magazine提及以下工具：

dtcss（CSS的PHP预处理器）

#define mp margin, padding
#define bg background
#define fg color

#define FONT Verdana, sans-serif

html, body {
        mp: 0;
        bg: #000;
        fg: #eee;
}
body {
        font: small FONT;
}
input, textarea {
        font: 1em FONT;
}

.fancy {
        border-top-left: 2px solid #00f;
        border-bottom-right: 4px dashed #f00;
        b {
                color: yellow;
        }
}

JSON CSS（基于jQuery） - 请参阅Jonathan的回答

我对这些方面都没有任何经验，但我有兴趣听取其他人的经验：）

Answer 2

看看CSS＆amp; JS：http://taat.pl/en/cssjss/#additional

这是一个简单的脚本，可以动态压缩Javascript和CSS文件。它很聪明 - 使用缓存副本，添加缓存相关的heqders，清理代码/样式。最重要的是，它支持基本的CSS变量。

它是用PHP编写的。

Answer 3

你可以通过php'谷歌'变量css'。有各种网站向您展示如何使用PHP生成您的CSS。
如果您正在为网站开发主题，那么php-css路线很不错。

Answer 4

虽然对此持续存在争议，但我非常喜欢CSS JSON背后的概念。当然这意味着如果没有启用javascript，你的风格也会消失。

使用JSON编写样式规则，使您能够在确定值时使用函数，变量等：

var cssjson = {
  ".copy-1":{
    "font-family":"Verdana, Geneva, Arial, Helvetica, sans-serif",        
    "font-size":"11px",
    "color":"#CCC"
  },
  "div#container div#header":{
    "CSSJSON-INHERIT-SELECTOR":".copy-1",
    "position":"absolute",
    "top":"12px",
    "left":"4px"
  }
}

然后将其用于CSSugar：

等工具中

CSSugar(
  {
    //match every even tr element
    "tr:even" : {
      "background": "pink"
    },
    //match every input element of type text
    ":text" : {
      "fontFamily": "Verdana",
      "fontSize": "11px",
      "color": "green"
    },
    //match the second div in the body 
    "body div:gt(1)" : {
      "background": "orange"
    }
  },
  //lets use the jQuery selector engine
  $
);
//now feel the power, even in IE6!

推荐扩展CSS的好方法

4 个答案: