超强CSS扩展框架

你还在写纯的CSS吗？那你就是outman了，今天介绍两个超强CSS扩展框架，他们让笨拙的CSS融入编译语言的编程思想，让你感觉豁然开朗！

两个框架分别为：

sass(ruby环境运行，http://sass-lang.com/)

lesscss(javascript编写，http://lesscss.org/#-client-side-usage)

下面介绍他们的厉害之处：

variables定义常量

//原生代码 @color: #4D926F; #header {   color: @color; } h2 {   color: @color; }

//编译之后的代码 #header {   color: #4D926F; } h2 {   color: #4D926F; }

mixin:定义class变量，可带参数

//原生代码 .rounded-corners (@radius: 5px) {   border-radius: @radius;   -webkit-border-radius: @radius;   -moz-border-radius: @radius; }

//编译之后的代码 #header {   .rounded-corners; } #footer {   .rounded-corners(10px); } #header {   border-radius: 5px;   -webkit-border-radius: 5px;   -moz-border-radius: 5px; } #footer {   border-radius: 10px;   -webkit-border-radius: 10px;   -moz-border-radius: 10px; }

支持嵌套

//原生代码 #header {   h1 {     font-size: 26px;     font-weight: bold;   }   p { font-size: 12px;     a { text-decoration: none;       &:hover { border-width: 1px }     }   } }

//编译之后的代码 #header h1 {   font-size: 26px;   font-weight: bold; } #header p {   font-size: 12px; } #header p a {   text-decoration: none; } #header p a:hover {   border-width: 1px; }

支持基本运算符，支持函数（色彩函数，数学函数，字符串函数等等）

//原生代码 @the-border: 1px; @base-color: #111; @red:        #842210; #header {   color: @base-color * 3;   border-left: @the-border;   border-right: @the-border * 2; } #footer {    color: @base-color + #003300;   border-color: desaturate(@red, 10%); }

//编译之后的代码 #header {   color: #333;   border-left: 1px;   border-right: 2px; } #footer {    color: #114411;   border-color: #7d2717; }

还有其他一些特性比如继承，感兴趣的可以到他们的官网去看看。