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”