less基本使用

1 less中的变量

//对值进行声明
@link-color: #ccc//定义变量名称
.@{sleName} {}@bg: background-color;
//定义属性名称
.container {@{bg}: red;
}

2 继承(复用重复样式)

//继承必须位于选择器最后
//继承选择器名不能为变量
.a:hover:extend(.b) {}.a {&:extend(.b,.c,.d) {}
}.b {.c{}
}
//继承嵌套结构内样式需要加上all
.a:extend(.b all) {}

3 混合

用于值不确定的场景

//@arguments表示传入的所有参数
.flex(@flex: 1){flex: @flex
}.a {.flex(2);
}//条件mixins
.bg (@color; @width) when (@width >= 50%) {}

4 合并

//相同步骤需要把符号改成+_
.mixin(){transform+_: scale(2);
}

5 将颜色字符串转换为可以使用的颜色

.color {color: color("#fff");
}

6 获取图片文件的尺寸

.img {width: image-width("file.png");height: image-height("");background-size: image-size("file.png");
}

7 单位转换函数

在这里插入图片描述

.convert {time: convert(9s,"ms");
}

8 将内联资源转换为base64或text/html格式

.img {background: data-uri('../data/image.jpg');
}

9 实践

.flex(@jc:center,@ai:center, @fd: row, @fw: nowrap) {display: flex;justify-content: @jc;align-items: @ai;flex-direction: @fd;flex-wrap: @fw;
}.flex_sb_c_w {.flex(space-between,center,row,wrap);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/35991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

走出迷宫(多组输入bfs)

链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 题目描述 小明现在在玩一个游戏,游戏来到了教学关卡,迷宫是一个N*M的矩阵。 小明的起点在地图中用“S”来表示,终点用“E”来表示,障碍物用“#…

浅谈人工智能技术与物联网结合带来的好处

物联网是指通过互联网和各种技术将设备进行连接,实时采集数据、交互信息的网络,对设备实现智能化自动化感知、识别和控制,给人们带来便利。 人工智能是计算机科学的一个分支,旨在研究和开发能够模拟人类智能的技术和方法。人工智能…

Redis: 详解、使用教程和示例

Redis: 详解、使用教程和示例 什么是 Redis? Redis(Remote Dictionary Server)是一个开源的、内存数据存储系统,它可以用作数据库、缓存和消息中间件。它支持多种数据结构,如字符串、哈希表、列表、集合、有序集合等…

Hadoop组件

前言 Hadoop 是一个能够对大量数据进行分布式处理的软件框架。具有可靠、高效、可伸缩的特点。 HDFS(hadoop分布式文件系统) 是hadoop体系中数据存储管理的基础。他是一个高度容错的系统,能检测和应对硬件故障。

后院失火、持续亏损!Mobileye半年报「不回避」竞争压力

"客户在2023年上半年非常谨慎,导致增长率低于正常水平,但我们已经看到下半年回暖趋势,预计下半年交付将比去年同期增长16%,远高于上半年。"这是Mobileye在近日公司半年报发布会上的预判。 公开数据显示,今年…

Python 实现Selenium录屏的一种方法(图片整合成动态图)

由于UI层自动化的不稳定性,经常会遇到执行中断或用例失败的问题,以下是一些常见的措施。 1.详细的日志 2.定位出错时截图 3.Pytest的缓存机制(可以记录成功了哪些失败了哪些) 4.自动重试机制(如pytest-rerunfailures) 5.用例录像 用例录像是最直观的一…

2023网络安全常用工具汇总(附学习资料+工具安装包)

几十年来,攻击方、白帽和安全从业者的工具不断演进,成为网络安全长河中最具技术特色的灯塔,并在一定程度上左右着网络安全产业发展和演进的方向,成为不可或缺的关键要素之一。 话不多说,网络安全10款常用工具如下 1、…

Opencv4基于C++基础入门笔记:图像 颜色 事件响应 图形 视频 直方图

效果图◕‿◕✌✌✌:opencv人脸识别效果图(请叫我真爱粉) 先看一下效果图勾起你的兴趣! 文章目录: 一:环境配置搭建 二:图像 1.图像读取与显示 main.cpp 运行结果 2.图像色彩空间转换 2.1 换色彩 test.h …

感受RFID服装门店系统的魅力

嘿,亲爱的时尚追随者们!今天小编要给你们带来一股时尚新风潮,让你们感受一下什么叫做“RFID服装门店系统”,这个超酷的东西! 别着急,先别翻白眼,小编来解释一下RFID是什么玩意儿。它是射频识别…

云计算——存储虚拟化功能

作者简介:一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页​​​​​ 目录 前期回顾 前言 一.存储虚拟化功能 1.精简磁盘和空间回收 2.快照 (1&a…

面试热题(反转字符串中的单词)

给你一个字符串 s ,请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意:输入字符串 s中可能会存在前导空格、尾随空格…

JVM——栈和堆概述,以及有什么区别?

方法栈 方法栈并不是某一个 JVM 的内存空间,而是我们描述方法被调用过程的一个逻辑概念。 在同一个线程内,T1()调用T2(): T1()先开始,T2()后开始;T2()先结束,T1()后结束。 堆和栈概述 从英文单词角度来…

Maven介绍,部署在eclipse中

目录 一.Maven介绍 1,什么是maven? 2. 为什么maven会在企业中大量使用? 3.没有使用maven的前后区别? 4.maven在Java开发中的实际效果图 二.maven部署在eclipse中 1.下载maven在其官方网址下载(当然实际下载也要根据个人的…

服务器安装Tomcat

下载Tomcat 下载地址在这: Tomcat官网 下载完成以后把压缩包上传到服务器中(我传到了www/java),进行解压(解压到),如果没有进行指定解压到哪里,默认是到root文件夹中 tar -zxvf /www/java/apache-tomcat-9.0.103.tar.…

统计学补充概念03-核密度估计

概念 核密度估计(Kernel Density Estimation,简称 KDE)是一种非参数统计方法,用于估计随机变量的概率密度函数(Probability Density Function,PDF)。它通过在每个数据点周围放置核函数&#xf…

day 10 | 232.用栈实现队列、 225. 用队列实现栈

目录&#xff1a; 解题及思路学习 232.用栈实现队列 https://leetcode.cn/problems/implement-queue-using-stacks/ 模拟题&#xff0c;用两个栈来实现队列的功能。 class MyQueue { public:stack<int> stIn;stack<int> stOut;/** Initialize your data struc…

HCIP学习--BGP3

目录 前置内容 BGP下一跳的修改问题 BGP的属性 配置 PrefVal权重属性 负载分担 LocPrf 负载分担 NextHop AS-PATH Ogn 配置 MED 配置 BGP选路规则 BGP的社团属性 配置及解释 前置内容 HCIP学习--BGP1_板栗妖怪的博客-CSDN博客 HCIP学习--BGP2_板栗妖怪的博客…

031_小驰私房菜_MTK平台Camera基本流程,日志信息打印

这篇文章主要介绍mtk平台,camera基本流程的日志信息打印。针对下面几点展开: 一) camera打开流程; 二) 帧请求 && 帧回调; 三) 拍照; MTK平台camera模块,如果想要打开更多日志,一般需要先设置 adb shell setprop "vendor.debug.camera.log" 1 然后…

STM32控制SG90舵机原理及代码

STM32控制SG90舵机原理及代码 一.SG90舵机原理二.控制SG90舵机三.代码实例3.1 配置定时器3.2 main 函数 四.实验现象 一.SG90舵机原理 舵机的运用还是比较广泛的&#xff0c;那么舵机工作原理是什么呢&#xff0c;一般来说我们给舵机一个信号他就能工作了&#xff0c;那么这个…

00 - 环境配置

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 1. 环境说明2. 安装配置2.1 配置user信息2.2 config的三个作用域 3. 建git仓库3.1 把已有的项目代码纳入git管理3.2 新建的项目直接用git管理3.3 配置local的user和email3.4 优先级&…