简介

不熟悉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;
  width: 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;
  width: 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;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner:extend(.juzhong all) { # extend可以减小css的大小 继承的意思all可以继承 .juzhong 所有的效果 比如hover
        &:nth-child(1){ // & 表示与上一级同级的意思
            width: 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;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner:extend(.juzhong all) {
        &:nth-child(1){
            width: 100px;
            height: 100px;
            @{bg}: @myluckycolor; // 定义变量
        }
        &:nth-child(2){
            width: 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;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner:extend(.juzhong all) {
        &:nth-child(1){
            width: 100px;
            height: 100px;
            @{bg}: @myluckycolor; // 定义变量
        }
        &:nth-child(2){
            width: 50px;
            height: 50px;
            @{bg}: yellow;
        }
    }
}

.triangle(@_, @w, @c){ // 自带私有函数
    width: 0px;
    height: 0px;
    overflow: hidden;
}
.triangle(L, @w, @c) {
    border-width: @w;
    border-style: dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}
.triangle(R, @w, @c) {
    border-width: @w;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @c;
}
.triangle(T, @w, @c) {
    border-width: @w;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @c transparent;
}
.triangle(B, @w, @c) {
    border-width: @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>

posted on 2020-06-23 15:37 HDU李少帅阅读(117) 评论(0) 编辑收藏举报