Less学习心得

Less

最近学习less，在安装less.js-windows-master时就遇到坑，按着网上教程安装配置环境后，在dos里面输入指令也是报错，百度结果各种前篇一律的博客，根本解决不了问题，后来发现，在解压目录下面的bin目录添加node.exe才解决。

基础语法

定义变量

@color: red; .div{ width: 200px; height: 200px; border: 1px solid @color; }

选择器变量

@select: div1; .@{select}{ width: 200px; height: 200px; border: 1px solid @color; }

url变量

@img: "../pic"; .div1{ background-image: url("@{img}/p1.jpg"); }

属性变量

@prop:color; .div1{ background-@{prop}:red; }

变量嵌套

@a:50px; @b:@a; .div1{ font-size:@b; }

混合

普通混合

.div1 { text-align: center; font-weight: bold; } #d1 { text-decoration: underline; .div1; }

带参混合

单个参数 .fontColor(@color) { color:@color; } #d1 { .fontColor(#eee); } 多个参数 .setColumns(@columns:100px 3, @column-gap:10px, @colmn-rule:2px dashed red) { -webkit-columns: @columns; -moz-columns: @columns; -o-columns: @columns; columns: @columns; -webkit-column-gap: @column-gap; -moz-column-gap: @column-gap; -o-column-gap: @column-gap; column-gap: @column-gap; -webkit-column-rule: @colmn-rule; -moz-column-rule: @colmn-rule; -o-column-rule: @colmn-rule; column-rule: @colmn-rule; } #d3{ width: 400px; // .setColumns(100px 2,5px,1px solid blue);可以调用时传参 .setColumns; //也可使用默认值 }

运算

@num1:20; @num2:@num1+5; @num3:@num1+@num2; @num4:(@num1+3)*2; @color:#444/2; @bgColor:@color+#333; #d1{ // font-size:unit(@num2,px); font-size:unit(@num4,px); color:@color; background-color: @bgColor; border: unit((@num1+2)/2,px) dashed red; width:300px+200; }

unit函数

#d1 { font-size:unit(5,px)：结果为5px font-size:unit(5px,rem)：结果为5rem font-size:unit(5px)：结果为5 }

颜色函数

//darken()、lighten()、mix() .c4{ // background-color: darken(red,5%);红色加深5% // background-color: lighten(red,30%);红色减少30% background-color: mix(red,yellow,80%);//混合红色黄色 }

提取函数

extract(); @myBorder:1px solid red; .c1{ border:@myBorder; font-size: 30px; color:extract(@myBorder,3); }

还有一些不常用的函数就不列举了。

嵌套

#header { color: black; .navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } } 生成 #header { color: #000 } #header .navigation { font-size: 12px } #header .logo { width: 300px } #header .logo:hover { text-decoration: none } 代码结构很清晰

继承

.hello{ color:red; } h1:extend(.hello){ font-size:20px; } 生成 .hello, h1 { color: red } h1 { font-size: 20px }

导入

可以使用@import导入其他文件（.less或.css） 如果导入的是.less文件，则可以省略扩展名 @import “library”; //library.less @import “style.css”