LESS第二课

最新推荐文章于 2020-11-28 00:11:41 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2020-11-28 00:11:41 发布

阅读量347

点赞数

分类专栏： less讲解

本文链接：https://blog.csdn.net/qq_37805832/article/details/107454498

版权

less讲解专栏收录该内容

7 篇文章 0 订阅

订阅专栏

变量插值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
		/*@size:200px;
		@w:width;
		@s:div;
		@{s}
		{
			@{w}:@size;
			height:@size;
			background:red;
		}*/
		/*编译后...*/
		div {
		  width: 200px;
		  height: 200px;
		  background: red;
		}

    </style>
</head>
<body>
	<div></div>
</body>
</html>

记住。如果选择器名称与属性名称想使用变量里面的值需要用变量插值.
属性的值想使用变量的名称可以直接使用。
2.变量插值的格式
格式: @{变量名称}
在这里插入图片描述

less中的运算：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
		/*div
		{
			width: 200px;
			height: 200px;
			background: red;
			position: absolute;
			left: 50%;
		/*less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算*/
			/*margin-left:(-200px/2) ;
		}*/
		/*编译后的css文件。*/
		div {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

    </style>
</head>
<body>
	<div></div>
</body>
</html>