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

最新推荐文章于 2024-04-11 17:26:48 发布

前端-文龙刚

最新推荐文章于 2024-04-11 17:26:48 发布

阅读量1.4k

点赞数

分类专栏： html+css less 文章标签： css less 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/128373823

版权

html+css 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

less

2 篇文章 0 订阅

订阅专栏

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加变量

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>原生CSS加变量</title>
	<style type="text/css">
		/*作用域：在最外层定义一个变量，这个标签里面的所有元素都可以用
		这里的这个:root 是属于页面最外层的一个标签*/
		:root{--fontSize:50px;}
		*{list-style-type:none;}
		.div1{
			/*1、声名变量 关键字 "--变量名"  */
			--bgColor:red;
			--borderWidth:5px;
			
			/*2、使用变量 var(--bgColor) */
			background-color:var(--bgColor);
			border:var(--borderWidth) solid;
		}
		.div2{
			/*如果有声名的变量，就用声名的变量，如果没有就用默认的
			var(声名的变量,默认的)
			*/
			background-color:var(--bgColor2,green);
		}
		.div2::after{
			/*变量拼接*/
			--msg:'你好讨厌哦！';
			content:var(--msg)  '我心里也有你哦';
		}
		.div3{
			--h:6;
			--bgColor3:yellow;
			/*利用calc 计算*/
			width:calc(50% - 100px);
			/*在calc里面运用定义变量计算*/
			height:calc(var(--h) * 50px);
			background-color:var(--bgColor3);}
			
		.div4{height:600px;background-color:red;}	
		.div4 li{height:calc(600px / 3);}
		.div4 li:nth-child(1){background-color:blue;}
		.div4 li:nth-child(2){background-color:yellow;}
		.div4 li:nth-child(3){background-color:green;}
		.div5{font-size:var(--fontSize);}
	</style>
</head>
<body>
	<div class="div1">我每次过安检都会被拦下来</div>
	<div class="div2">因为心里装了一个你</div>
	<div class="div3">LESS计算属性</div>
	
	<div class="div4">
		<ul>
			<li>我是li-1</li>
			<li>我是li-1</li>
			<li>我是li-1</li>
		</ul>
	</div>
	<div class="div5">测试作用域</div>
	
</body>
</html>