简介

不熟悉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>

less 剖析的更多相关文章

  1. 探索C#之6.0语法糖剖析

    阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...

  2. jQuery之Deferred源码剖析

    一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样, ...

  3. [C#] 剖析 AssemblyInfo.cs - 了解常用的特性 Attribute

    剖析 AssemblyInfo.cs - 了解常用的特性 Attribute [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5944391.html 序 ...

  4. Membership三步曲之进阶篇 - 深入剖析Provider Model

    Membership 三步曲之进阶篇 - 深入剖析Provider Model 本文的目标是让每一个人都知道Provider Model 是什么,并且能灵活的在自己的项目中使用它. Membershi ...

  5. 《AngularJS深度剖析与最佳实践》简介

    由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文.毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持sh ...

  6. 探索c#之Async、Await剖析

    阅读目录: 基本介绍 基本原理剖析 内部实现剖析 重点注意的地方 总结 基本介绍 Async.Await是net4.x新增的异步编程方式,其目的是为了简化异步程序编写,和之前APM方式简单对比如下. ...

  7. ASP.NET Core管道深度剖析（2）：创建一个“迷你版”的管道来模拟真实管道请求处理流程

    从<ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求>我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从总体设计来讲是非常简单的,但 ...

  8. [C#] 走进异步编程的世界 - 剖析异步方法（上）

    走进异步编程的世界 - 剖析异步方法(上) 序 这是上篇<走进异步编程的世界 - 开始接触 async/await 异步编程>(入门)的第二章内容,主要是与大家共同深入探讨下异步方法. 本 ...

  9. [C#] 走进异步编程的世界 - 剖析异步方法（下）

    走进异步编程的世界 - 剖析异步方法(下) 序 感谢大家的支持,这是昨天发布<走进异步编程的世界 - 剖析异步方法(上)>的补充篇. 目录 异常处理 在调用方法中同步等待任务 在异步方法中 ...

  10. 计算机程序的思维逻辑 (29) - 剖析String

    上节介绍了单个字符的封装类Character,本节介绍字符串类.字符串操作大概是计算机程序中最常见的操作了,Java中表示字符串的类是String,本节就来详细介绍String. 字符串的基本使用是比 ...

随机推荐

  1. web自动化：webdriver常用api

    一.获取操作 1.get('url'):访问指定的url webdriver.get(String url); 2.Getcurrenturl():获取当前页面url webDriver.getCur ...

  2. [开源] .Net 使用 ORM 访问 人大金仓数据库

    前言 京人大金仓信息技术股份有限公司(以下简称"人大金仓")是具有自主知识产权的国产数据管理软件与服务提供商.人大金仓由中国人民大学一批最早在国内开展数据库教学.科研.开发的专家于 ...

  3. C#基础——不可变集合

    参照:https://mp.weixin.qq.com/s/NFBc2bNeHpdadh89T44Lpg 在 .NET Core 中就存在着这三大 IReadOnlyList,IReadOnlyDic ...

  4. ORA-24247：网络访问被访问控制列表（ACL）拒绝器

    我在oracle 存储过程中发送http请求, 报错如下: ORA-29273:HTTP请求失败 ORA-06512:在"SYS.UTL HTTP",line 1527 ORA-2 ...

  5. 【翻译】Processing系列｜（二）安卓模式的安装使用及打包发布

    上一篇:[翻译]Processing系列|(一)简介及使用方法 下一篇:[翻译] Processing系列|(三)安卓项目构建 我的目的是在学习完成之后写出一个安卓程序,所以第二篇就是Processi ...

  6. 【记录】日常｜shandianchengzi的三周年创作纪念日

    机缘   接触 CSDN 之前,我已经倒腾过 hexo 搭建 github 博客.本地博客.图床:   接触 CSDN 之后,我还倒腾过纸质笔记.gitee 博客.博客园.知乎.b站.Notion.腾 ...

  7. 网络编程：TIME_WAITE

    一.TIME_WAIT 1.TIME_WAIT发生的场景 故障:一次升级线上应用服务后,发现该服务的可用性时好时坏,一段时间可以对外提供服务,一段时间突然又不可以了.使用netstat命令发现主机有成 ...

  8. error：<init>(Ljava/lang/String;)V

    在同一个包或类名中,有重名的类哦 解决方法:换个在当前包或工程内没用过的类名就KO 照例来个eg:在javaDasic包里已有Person类,报错如下,是不是蛮熟悉咩 换个没用过的类名,例如把Pers ...

  9. 自动装配组件@Resource和@Autowired的区别

      @Resource和@Autowired这两个注解都提供了将依赖对象注入到当前对象的功能,但二者却有众多区别,并且它们是常见的面试题之一,所以楼兰胡杨今天就来梳理它,希望对各位有所帮助.首先,梳理 ...

  10. selenium driver add_cookie正确姿势

    需求 seo给了个开发小需求,查询搜索引擎站点后台的索引量 需求分析 难点在于怎么绕过登录 技术选型 使用selenium+firefox+geckodriver执行抓取 技术难点解析 获取cooki ...