CSS教程之CSS优化:less优化CSS

属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
网页制造poluoluo文章简介：less用变量（variables）,援用（mixins）,表达式(operations),嵌套划定规矩（nestedrules）来扩大CSS开辟.
less官方网址：http://lesscss.org
上面就来先容下吧
less用变量（variables）,援用（mixins）,表达式(operations),嵌套划定规矩（nestedrules）来扩大css开辟

变量（variables）
反复利用的值能够界说成变量的情势，便利变动哈
例子以下：

1. #header{color:#4D926F;}h2{color:#4D926F;}

复制代码

1. @brand_color:#4D926F;#header{color:@brand_color;}h2{color:@brand_color;}

复制代码

援用（mixins）
在一个类中能够援用另外一个类的称号做为该类的属性。

1. #header{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}#footer{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}

复制代码

1. .rounded_corners{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}#header{.rounded_corners;}#footer{.rounded_corners;}

复制代码

嵌套划定规矩（nestedrules）
之前我们开辟的css的时分selector的承继都要写的很长，用less后。我们能够用更简便，直不雅的体例来写css
实比方下：

1. #header{color:red;}#headera{font-weight:bold;text-decoration:none;}

复制代码

1. #header{color:red;a{font-weight:bold;text-decoration:none;}}

复制代码

表达式(operations)
一些单位之间大概有些值要成比例，好比宽高，色彩值
我们都能够用表达式来盘算完成

1. #header{color:#333;border-left:1px;border-right:2px;}#footer{color:#222;}

复制代码

1. @the-border:1px;@base-color:#111;#header{color:@base-color*3;border-left:@the-border;border-right:@the-border*2;}#footer{color:@base-color+#111;}

复制代码

你可以轻松地控制页面的布局。