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)：结果为5pxfont-size:unit(5px,rem)：结果为5remfont-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”