|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
网页制造poluoluo文章简介:less用变量(variables),援用(mixins),表达式(operations),嵌套划定规矩(nestedrules)来扩大CSS开辟.
less官方网址:http://lesscss.org
上面就来先容下吧
less用变量(variables),援用(mixins),表达式(operations),嵌套划定规矩(nestedrules)来扩大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;}
复制代码 嵌套划定规矩(nestedrules)
之前我们开辟的css的时分selector的承继都要写的很长,用less后。我们能够用更简便,直不雅的体例来写css
实比方下:- #header{color:red;}#headera{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;}
复制代码 你可以轻松地控制页面的布局。 |
|