Less的基本语法

less的每一个语句后必须使用";"结束，否则可能无法正确的转换成css

1、导入

即在当前less文件中引用其它less文件，被引入的less文件中的内容可以在此less文件中使用。在引用less文件时可以省略扩展名

@import "global"; // global.less 
@import "comm.less";
@import "index.css";

2、注释

less的注释有两种，

一种为单选注释，以“//”开头，“//”后的内容为注释的内容

//  @import 'comm';

另一种为多行注释，以“/*”开头，以“*/”结束，中间的内容为注释的内容

/* 
@import 'comm.less'; 
 */

3、嵌套

嵌套是指子或后代元素的选择器可以定义在父或祖先元素的选择器中

1）嵌套的使用

<ul>
    <li><a href="#"">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
</ul>
ul{
	list-style: none;
	li{   //后代
		border:1px solid red;
		height: 30px;
		>a{  //子
			color:#fff;
		}
	}
}

以上代码转换成css后为以下代码

ul {
  list-style: none;
}
ul li {
  border: 1px solid red;
  height: 30px;
}
ul li > a {
  color: #fff;
}

2）引用父或祖先选择名称

在内部使用”&“可以引用外部选择器的名称

li{
    &:hover{
        >a{
	    color:blue;
	}
    }
    &-a{
	color: green;
    }
}

以上代码转换成css后为以下代码

li:hover >a {
    color:blue;
}
li-a{
    color: green;
}

4、扩展

扩展使用:extend关键字，通过扩展可以把一个选择器与其它已存在的选择器组成并集，而它自己定义的样式会单独为一个选择器

div{
	height: 30px;
}
p:extend(div){
	whidth:30px;
}

以上代码转换成css后为以下代码

div, p {
  height: 30px;
}
p {
  whidth: 30px;
}

5、混合（mixin）

即一个选择器中直接引用另一个选择器的名称，可以把另一个选择器中的样式直接复制过来。但要注意，被引用的选择器只能是类或是id选择器

.div{
	height: 30px;
}
p{
	.div();
	width:30px;
}

以上代码转换成css后为以下代码

.div{
	height: 30px;
}
p {
  height: 30px;
  width: 30px;
}

6、声明变量

变量的声明和使用有以下几个特点

1）变量名总是以@开头，定义的变量要以在整个less文件任意地方使用，

2）如果在引用时需要与其它内容拼接，则需要使用@{变量名}的语法来引用。

3）变量可以进行算术运算。

4）如果变量的值本身包含特殊符号，如空格等，可以使用引号括起来。但前面在加上”~“

@width: 10px;
@height: @width + 10px;
@a: acitve;
@color: fff;
@border : ~'1px solid #000';

ul{
	.@{a}{
		height: @height;
		line-height: @height;
		width: @width * 2;
		color: '#@{color}';
        border: @border;
	}
}

以上代码转换成css后为以下代码

ul .acitve {
  height: 20px;
  line-height: 20px;
  width: 20px;
  color: '#fff';
   border: 1px solid #000;
}

7、变量作用域

变量可以less文件中定义，这种变量称为全局变量，也可以在一个选择器中定义，这种变量称为局部变量。全局变量可以在整个less文件中使用，但局部变量只能在当前选择器中使用。当全局变量和局部变量重名时，按照就近原则会使用局部变量。在变量的作用域中，变量的声明和使用的顺序没有关系。可以先声明变量再使用，也可以先使用再声明变量

@var : 10px;
.header{
	height: @var;	
	@var :20px;
	img{
		height: @var;
	}
}

以上代码转换成css后为以下代码

.header {
  height: 20px;
}
.header img {
  height: 20px;
}

8、函数

函数可以通过传入参数，生成不同的结果，参数名与变量的命名规则相同，如果要设置默认值，可以在变量名后使用”:“来定义。函数名只能以”.“或是”#“开头

.fun(@w,@h : 20px,@c){
	height: @h;
	line-height: @h;
	width: @w;
	border :1px solid @c;
}

.@{a}{
	.fun(10px,20px, #000);
}

以上代码转换成css后为以下代码

.acitve {
  height: 20px;
  line-height: 20px;
  width: 10px;
  border: 1px solid #000;
}

9、条件结构

函数可以使用when 关键字指定是否执行，如果when的结果为true，函数会被执行，如果为false，函数将不会被执行。

示例

函数名(参数) when (条件表达式)

示例

/* 当参数@load的值为true时，函数才会被执行 */
.fun(@height,@load) when (@load = true){
    height : @height;
    line-height : @height;
}

.active{
    width : 100%;
    .fun(30px,true); /* 执行函数生成代码 */
}

注意：

1）when与小括号之间必须有空格

2）when后可以执行条件比较，如等于（=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）

/* 当@height大于等于30时，执行函数 */
.fun(@height) when ((@height >= 30px){ 
    height : @height;
    line-height:@height
}

.active{
    width:50px;
    .fun(30px);
}

3）多个括号之间可以使用and（并且）、or（或者）来组合多个条件，也可以使用","（或者）来组合多个条件

/* 当@height大于20 并且 小于 40时，执行函数 */
.fun(@height , @center) when (@height > 20px) and (@height < 40px) {
    height : @height;
    line-height:@height
}

.active{
    width:50px;
    .fun(30px);
}

4）当and和or同进使用时，and的优先级比or高，可以使用括号来提升优先级

/* 当@center为true时，或者@height大于20 并且 小于 4时，执行函数 */
.fun(@height , @center) when (@center = true) , ((@height > 20px) and (@height < 40px)){
    height : @height;
    line-height:@height
}

.active{
    width:50px;
    .fun(30px);
}

5）可以使用not来表示非。

/* 当@height不等于20时，执行函数 */
.fun(@height) when not (@height = 20px){
    height : @height;
    line-height:@height
}

.active{
    width:50px;
    .fun(10px);
}

10、循环

less本身没有专门的循环结构，但可以使用条件结构来实现，即在函数中调用自己，并在函数中改变when的值，直到条件不成立。结束函数的执行。这种结构相当于递归。

示例

.fun(@i) when (@i  <= 4){  
    width: @i;
    .fun(@i + 1); /*每次加1再传到函数，当传的值大于4的时候函数结束*/
    
}

.active{
    width:50px;
    .fun(1);
}