简介
不熟悉less，经常该样式要花费很多时间所以进行系统性的学习
参考链接
https://www.bilibili.com/video/BV1YW411T7vd?p=8
http://lesscss.cn/
https://blog.csdn.net/zy_1558538904/article/details/86567949
https://www.w3cschool.cn/less/less_math_functions.html
编译插件vscode
https://marketplace.visualstudio.com/items?itemName=Wscats.eno
配置 hero 插件 这个点掉就好了
基础
css 版本的实现居中
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
}
#wrap .inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: deeppink;
height: 100px;
100px;
}
#wrap .inner:hover {
background: pink;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="dist/02.css"/>
</head>
<body>
<div id="wrap">
<div class="inner">
inner
</div>
</div>
</body>
</html>
采用 less 改写css
* {
margin: 0;
padding: 0;
}
.juzhong{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.juzhong:hover{
background: yellow !important;
}
#wrap{
position: relative;
300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner:extend(.juzhong all) { # extend可以减小css的大小 继承的意思all可以继承 .juzhong 所有的效果 比如hover
&:nth-child(1){ // & 表示与上一级同级的意思
100px;
height: 100px;
background: deeppink;
}
}
}
变量
* {
margin: 0;
padding: 0;
}
@myluckycolor: lightblue; // 定义变量
@bg: background;
.juzhong{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.juzhong:hover{
background: yellow !important;
}
#wrap{
position: relative;
300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner:extend(.juzhong all) {
&:nth-child(1){
100px;
height: 100px;
@{bg}: @myluckycolor; // 定义变量
}
&:nth-child(2){
50px;
height: 50px;
@{bg}: yellow;
}
}
}
模板匹配
* {
margin: 0;
padding: 0;
}
@myluckycolor: lightblue; // 定义变量
@bg: background;
.juzhong{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.juzhong:hover{
background: yellow !important;
}
#wrap{
position: relative;
300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner:extend(.juzhong all) {
&:nth-child(1){
100px;
height: 100px;
@{bg}: @myluckycolor; // 定义变量
}
&:nth-child(2){
50px;
height: 50px;
@{bg}: yellow;
}
}
}
.triangle(@_, @w, @c){ // 自带私有函数
0px;
height: 0px;
overflow: hidden;
}
.triangle(L, @w, @c) {
border- @w;
border-style: dashed solid dashed dashed;
border-color: transparent @c transparent transparent;
}
.triangle(R, @w, @c) {
border- @w;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent @c;
}
.triangle(T, @w, @c) {
border- @w;
border-style: dashed dashed solid dashed;
border-color: transparent transparent @c transparent;
}
.triangle(B, @w, @c) {
border- @w;
border-style: dashed solid dashed dashed;
border-color: transparent @c transparent transparent;
}
.wrap{
.triangle(L, 100px, red)
}
避免编译
padding: ~"calc(100px + 100)";
大头大头 --
因为vue中的是for然后生成很多个不同的类名
less
// 定义函数
@backgroundColorList: red, green, blue, yellow, pink,deeppink, orange, black, gray, lightBlue;
.backgroundcard(@className, @backgroundColorList,@i){
.@{className}@{i}{ //属性名称 可以直接拼接属性
background: @backgroundColorList;
opacity: 0.5;
}
}
@checkboxClass: inner;
.loop(@i) when (@i < 11){ // extract 是取出列表中的对应元素
.backgroundcard(@checkboxClass,extract(@backgroundColorList, @i), @i);
.loop(@i+1);
}
.loop(1);
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="dist/02.css"/>
</head>
<body>
<div id="wrap">
<div class="inner1">
inner
</div>
<div class="inner2">
inner
</div>
<div class="inner3">
inner
</div>
<div class="inner4">
inner
</div>
<div class="inner5">
inner
</div>
<div class="inner6">
inner
</div>
<div class="inner7">
inner
</div>
<div class="inner8">
inner
</div>
<div class="inner9">
inner
</div>
<div class="inner10">
inner
</div>
</div>
<div class="wrap"></div>
</body>
</html>