less预处理_黄山市民网

Less官方中文网站

Less介绍：
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
作为一个后端开发人员，在项目开发中，被调到前端开发，遇到了从来没有用的Less编写前端样式，接下来学习一下他的语法，写一些小列子来玩玩。

文章目录

- 工具
- - html代码
  - Less代码
  - Less预编译后的样式

工具

Hduilder X 下载less预编译器
设置预编配置文件改成实时编译

html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Less</title>
	
	
    <link rel="stylesheet" type="text/css" href="./css/index1.css" />
	<style type="text/css"></style>
</head>
<body>
	<div id="box">
		雷猴
	</div>
	<button class="button"></button>
	
</body>
</html>
<div id="box2">
		H@Ming
	</div>

Less代码

@charset "UTF-8";
*{ 
	padding: 0px;
	margin: 0px;
}
//属性变量
@box-color:red;
//类名变量
@title-name:box;
//样式变量
@box-style:width;
//图片样式
@img-url:'../img';
//文件路径
@path-file:'./index2.less';
//动参作用域
@width-val: 200px;
//&：1、父选择器2、且的意思 //&-ok:class拼接-ok &：代表你的class属性 body{ 
	//background-image: url(../img/lyh.png);
	fill: url("./index1.less");
	background: url("@{img-url}/lyh.png");
}

#@{ title-name}{ 
	@{ box-style}: @width-val;
	height: 100px;
	background: @box-color;
	color: white;
	text-align: center;
	line-height: 100px; //链接父元素 &:hover { 
	    color: yellow;
	    background-color: black;
	  }
}

.button { 
	
  width: 100px;
  height: 100px;
  box-sizing: border-box; // &-ok：掉膘.button-ok进行样式渲染 &-ok { 
    color: green;
    background-color: green;
  }

  &-error { 
    color: red;
    background-color: red;
  }

  &-info { 
    color: yellow;
    background-color: yellow;
  }
 
}

//& + & :代表：.button + .button 一个class属性中有两个名称的 .button { 
  & + & { 
    color: red;
  }
//& & ：代表下级的class属性 & & { 
    color: yellow;
  }
//&&：代表同级别的class属性：.button.button && { 
    color: green;
  }
//.button-ok, .success：代表同属性下两种不同的属性.button .button-ok,.button .success 进行样式渲染 .button-ok, .success { 
    color: blue;
  }
//& > .ok ：代表向上查找属性：.button > .ok 进行样式渲染 & > .ok { 
    background-color: greenyellow;
  }
}
#box2 { 
  width: 250px;
  height: 200px;
  background-color: red;
  font-size: 20px;
}

Less预编译后的样式

@charset "UTF-8";
* { 
  padding: 0px;
  margin: 0px;
}
body { 
  fill: url("./index1.less");
  background: url("../img/lyh.png");
}
#box { 
  width: 200px;
  height: 100px;
  background: red;
  color: white;
  text-align: center;
  line-height: 100px;
}
#box:hover { 
  color: yellow;
  background-color: black;
}
.button { 
  width: 100px;
  height: 100px;
  box-sizing: border-box;
}
.button-ok { 
  color: green;
  background-color: green;
}
.button-error { 
  color: red;
  background-color: red;
}
.button-info { 
  color: yellow;
  background-color: yellow;
}
.button + .button { 
  color: red;
}
.button .button { 
  color: yellow;
}
.button.button { 
  color: green;
}
.button .button-ok, .button .success { 
  color: blue;
}
.button > .ok { 
  background-color: greenyellow;
}
/* ------------------------------------------------------------------------------------ */
@boxstyle:200px;
@bgcolor:red;
@box2:#box2;
@font-size:20px;
@{ box2}{ 
	width:@boxstyle+50;
	height: @boxstyle;
	background-color: @bgcolor;
	font-size: @font-size;
}

本文地址：https://blog.csdn.net/YHM_MM/article/details/109017143

黄山市民网：https://www.huangshanshimin.com/

文章目录

工具

html代码

Less代码

Less预编译后的样式

相关文章