Less学习笔记
less的几种语言特性
变量:
less源码:
@color: #4D926F; #header { color: @color; } h2 { color: @color; }
编译后的CSS:
#header { color: #4D926F; } h2 { color: #4D926F; }
混合:
less源码:
.rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }
编译后的CSS:
#header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
嵌套:
less源码:
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
编译后的CSS:
#header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
函数和运算:
less源码:
@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%); }
编译后的CSS:
#header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; }
bootstrap中有多个less文件,bootstrap.less引入了所有less文件,只需编译改文件就可得到完整css文件了。
variables.less 文件里面写了一些常用的样式变量。如需对页面整体风格进行修改,修改该文件里面样式值就可以了。