less引用其他less文件

2024-12-06 技术教程

示例

//radius.less#header,#footer{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;}

//example6.less@import"radius.less";@the-border:1px;@base-color:#111;@red:#842210;#header{color:(@base-color*3);border-left:(@the-border*10);border-right:(@the-border*2);}#footer{color:(@base-color+#003300);border-color:desaturate(@red,10%);}

说明

@import"radius.less"表示通过import引入一个名字叫radius的less文件

生成的csss文件(example6.css)

#header,#footer{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;}#header{color:#333333;border-left:10px;border-right:2px;}#footer{color:#114411;border-color:#7d2717;}

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

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>less6</title><linkrel="stylesheet"href="example6.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>