// 变量 @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } // ------------------------------ .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } // 混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法 #menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); } // ==> 编译后的css .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; } // ------------------------------ @base: #f04615; @width: 0.5; /* 函数 这是利用 percentage 函数将 0.5 转换为 50%,将颜色饱和度增加 5%,以及颜色亮度降低 25% 并且色相值增加 8 的用法 */ .class { width: percentage(@width); color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); } // ==> 编译后的css .class { width: 50%; color: #f6430f; background-color: #f8b38d; } // ------------------------------ // 命名空间和访问符 #bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: rgb(236, 160, 160); } } } // 现在就是把 .button 类混合到 #header a 如此: #header a { color: orange; #bundle.button(); // 还可以书写为 #bundle > .button 形式 } // ==> 编译后的css #header a { color: orange; display: block; border: 1px solid black; background-color: grey; } #header a:hover { background-color: #eca0a0; } // ------------------------------ // 映射(Maps) /* 从 Less 3.5 版本开始,还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。 */ #colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; } // ==> 编译后的css .button { color: blue; border: 1px solid green; } // ------------------------------ // 可以进行传递参数 .icon-basic(@bgColor) { display: flex; border-radius: 50%; width: 16px; height: 16px; color: #fff; font-size: 12px; background-color: @bgColor; } .icon-arrow { .icon-basic(#409ffa); } .icon-test { .icon-basic(red); } // ==> 编译后的css .icon-arrow { display: flex; border-radius: 50%; width: 16px; height: 16px; color: #fff; font-size: 12px; background-color: #409ffa; } .icon-test { display: flex; border-radius: 50%; width: 16px; height: 16px; color: #fff; font-size: 12px; background-color: red; }