html引入less文件,less引用其他less文件

示例

//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)

html>

less6

#header,#footer{

width: 500px;

height: 400px;

}

#header{

border-style: solid;

}

#footer{

border-style: solid;

border-width: 1px;

}