首页 > 开发 > CSS > 正文

CSS优化:less优化CSS

2024-07-11 09:03:58
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:less用变量 (variables),引用(mixins),表达式(operations),嵌套规则(nested rules)来扩展css开发.

less官方网址:

下面就来介绍下吧

less用变量 (variables),引用(mixins),表达式(operations),嵌套规则(nested rules)来扩展css开发

 

变量 (variables)
重复使用的值可以定义成变量的形式,方便更改哈
例子如下:

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

 

 

引用(mixins)
在一个类中可以引用另一个类的名称做为该类的属性。

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

嵌套规则(nested rules)
以前我们开发的css的时候selector的继承都要写的很长 ,用less后。我们可以用更简洁,直观的方式来写css
实例如下:

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

 

表达式(operations)
一些单元之间可能有些值要成比例,比如宽高,颜色值
我们都可以用表达式来计算实现

#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #222;}@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;}

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表