html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>初见LESS</title> <link rel="stylesheet" href="style.css"/> </head> <body> <header> <h1>麦子学院</h1> </header> <footer class="widths"> <h1>麦子学院</h1> </footer> </body> </html>
less
@green: #801f77; @baise:white; //变量可以写到后面 header,footer{ background: @green; h1{ color: @baise; } } //作为选择器和属性名的变量 @kuandu:width; .@{kuandu}{ @{kuandu}:150px } //作为URL的变量 @imgurl:"https://www.baidu.com/img/"; header{ background: @green url("@{imgurl}bdlogo.png"); height: 500px; } //定义多个相同名称的变量时，后面覆盖前面，作用域概念 @var: 0; .class { @var: 1; .brass { @var: 2; three: @var; //这是的值是3 @var: 3; } one: @var; //这是的值是1 }
css
header, footer { background: #801f77; } header h1, footer h1 { color: #ffffff; } .width { width: 150px; } header { background: #801f77 url("https://www.baidu.com/img/bdlogo.png"); height: 500px; } .class { one: 1; } .class .brass { three: 3; }