0
点赞
收藏
分享

微信扫一扫

less 的基础知识

火热如冰 2022-03-11 阅读 66
/*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;}
举报

相关推荐

0 条评论