less表达式使用

2024-12-05 技术教程

示例

@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%);}

说明

(@base-color*3)表示表达式运算

语法

(变量1运算符变量2)

生成的css文件(example4.css)

#header{color:#333333;border-left:1px;border-right:2px;}#footer{color:#114411;border-color:#7d2717;}

在html文件中使用css(less4.html)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>less4</title><linkrel="stylesheet"href="example4.css"><style>#header,#footer{width:500px;height:400px;}#header{border-style:solid;}#footer{border-style:solid;border-width:1px;}</style></head><body><divid="header">header</div><divid="footer">footer</div></body></html>