less与原生css变量声明及使用

less中变量声明

/*1、less中变量声明：@变量名称*/
@bgColor:red;
@border:1px solid;
/*2、使用变量*/
.div1{background-color:@bgColor;border:@border;} 

/*3、函数的使用*/
.setColor(@c){//定义了一个函数，带有参数
	background-color:@c;//这是把参数传递给了背景
	border:1ps solid @c;
	color:@c;
}
.div{//div调用这个函数
	.setColor(red)//给函数的参数是red，但是这个函数名必须跟定义的函数名一致
}

/*4、嵌套方法*/
div{
	p{
		span{color:blue;}
	}
}

/*5、less循环*/
.loop(@index) when (@index > 0){//当index大于0的时候执行，类似递归函数
	.loop(@index - 1);
	//必须这么写
	.div@{index}{
		width:@index * 1px;
	}
}
/*使用函数*/
.div{//如果有这个.div的话，那么编译出来的class前面就有div，如果只是.loop(10);编译出来的只是单纯的class名字
	.loop(10);//里面的参数就是截止到多少停止
}
/*如果要在一个less文件中运用另一个less文件的话就得导入*/
@import "这里写另一个less文件路径"


/*去除a标签在移动端的时候点击时的高亮状态*/
a{-webkit-tap-highlight-color:transparent;}

 原生CSS加变量

	
	
	
	
	


	
我每次过安检都会被拦下来
	
因为心里装了一个你
	
LESS计算属性
	
	

		

			
我是li-1
			
我是li-1
			
我是li-1
		
	
	
测试作用域