less详解和说明

一、注释

以 /*/包裹的注释会被编译到css文件里面
以//开头的注释不会编译到css里面

二、less里面的变量

用@来声明变量
注意：

1、作为普通属性值来使用：@hello（变量名）：yellow（变量值）
2、作为选择器和属性名：@{selector}
3、作为URL：@url
4、变量的延迟加载

less文件：

@wnum:60%;								/*定义普通变量*/
@high:height;							/*定义属性*/
@selector:.box;							/*定义选择器*/
@con:container;
@url:"../images/image06.jpg";			/*定义URL*/
#@{con} {
  width: @wnum;							/*使用普通变量*/
  @{high}: 20em;						/*使用属性*/
  background-color: yellow;
  margin: 0 auto;
  position: relative;
  @{selector} {							/*使用选择器*/
    width: 20%;
    height: 20%;
    background-image: url(@url);		/*使用URL*/
    background-size: 10em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

注意这里的为选择器和属性名创建变量很少用

关于变量的延时加载（css里面有块级作用域）

less文件：

@num:1;
.class{
  @num:2;
  four:@num;				/*变量延时，5*/
  .box{
    @num:3;
    three:@num;				/*变量延时，4*/
    @num:4;
  }
  .box1{
    six:@num;				/*变量延时，5*/
  }
  @num:5;
}
.v1{
  five:@num;				/*为 1 */
}

三、less的嵌套规则

a）、基本嵌套规则

只要一嵌套就会产生空格

b）、&的使用

&可以取消嵌套的空格（平级）

四、less中的混合

less的混合：混合就是将一系列属性从一个规则集引入到另一个规则集的方式，混合不是函数，但其却有着相同的灵魂

a）、普通混合

会把less里面的混合输出到css文件里面(当然我们不希望这样)

.size{
  width: 20%;
  height: 20%;
}
#container {
  width: 60%;
  height: 20em;
  background-color: yellow;
  margin: 0 auto;
  position: relative;
  .box {
    .size;
    background-color: #ccc;
  }
  .box1{
    .size;
    background-color: red;
  }
}

b）、不带输出的混合

不会把less的混合输出到css里面

.size(){
  width: 20%;
  height: 20%;
}
#container {
  width: 60%;
  height: 20em;
  background-color: yellow;
  margin: 0 auto;
  position: relative;
  .box {
    .size;
    background-color: #ccc;
  }
  .box1{
    .size;
    background-color: red;
  }
}

c）、带参数的混合

可以提高灵活性

.size(@color){
  width: 20%;
  height: 20%;
  background-color: @color;
}
#container {
  width: 60%;
  height: 20em;
  background-color: yellow;
  margin: 0 auto;
  position: relative;
  .box {
    .size(#ccc);
  }
  .box1{
    .size(red);
  }
}

d）、带参数且有默认值的混合

.size(@color:skyblue){
  width: 20%;
  height: 20%;
  background-color: @color;
}
#container {
  width: 60%;
  height: 20em;
  background-color: yellow;
  margin: 0 auto;
  position: relative;
  .box {
    .size();
  }
  .box1{
    .size(red);
  }
}

e）、命名参数

.size(@color:skyblue,@b:1px black solid){
  width: 20%;
  height: 20%;
  background-color: @color;
  border: @b;
}
#container {
  width: 60%;
  height: 20em;
  background-color: yellow;
  margin: 0 auto;
  position: relative;
  .box {
    .size(2px green solid);
  }
  .box1{
    .size(@b:2px red solid);
  }
}

f）、匹配模式

@_：类似与一个对象的构造方法

.size(T,@color:skyblue,@b:1px black solid){						/*这里的T可以是任何字符串*/
  background-color: @color;
  border: @b;
}
.size(@_,@color:skyblue,@b:1px black solid){					/*这里的@_值为上面的那个T，这两个缺一不可*/
  width: 20%;
  height: 20%;
}

标识符

g）、argument变量

类似与js里面的argument（伪数组）

五、less运算

在less的加减乘除，运算只需要一个单位即可，如果加减有多个单位以第一个为标准，乘除注意单位一致

@width:200px;
@color:red;
.class{
	width:@width - 150;										
	background-color:@color + #ccc;
	color:@color*2;
	padding: @width/20;
	height:@width -20*5;
	margin:(@width+20)/5;
}

css里面的calc(）也可也用来计算，在这里不赘述了。

想了解的点击这里

h）、继承

less的继承在css的代码复用更好，但是在less里面的灵活性很差。（鱼与熊掌），less只能继承类不能继承混合，但也并不是不能继承混合，只需要把混合包装成类即可

.box:extend(.centerLevel all){							/*all代表把与centerLevel相关的伪类全部拿来*/
	.bg(@color:green,@size:10em);						/*这里的extend是继承了centerLevel所有的混合*/
}
.box1 {
    &:extend(.centerLevel);								/*这里的extend只继承了centerLevel（不包括hover）*/
    .bg(@color:red);
}

.centerLevel{											/*centerLevel混合*/
    position:absolute ;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.centerLevel:hover{										/*centerLevel：hover的混合*/
    background-color: #46b8da;
}

.bg(@size:5em,@color:skyblue,@b:1px black solid){			/*bg混合*/
	background-color: @color;
	border: @b;
	width: @size;
	height: @size;
}

六、less避免编译

借用官方的例子

@min768: ~"(min-width: 768px)";			/*输出@min768: (min-width: 768px);*/
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

七、导入

@import "library"; 
@import "typo.css";

八、编写less的时候也要注意css优先级的问题

好学的朋友也可以去这里看看

本文只用于个人学习和记录