less 剖析
简介
不熟悉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 剖析的更多相关文章
- 探索C#之6.0语法糖剖析
阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...
- jQuery之Deferred源码剖析
一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样, ...
- [C#] 剖析 AssemblyInfo.cs - 了解常用的特性 Attribute
剖析 AssemblyInfo.cs - 了解常用的特性 Attribute [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5944391.html 序 ...
- Membership三步曲之进阶篇 - 深入剖析Provider Model
Membership 三步曲之进阶篇 - 深入剖析Provider Model 本文的目标是让每一个人都知道Provider Model 是什么,并且能灵活的在自己的项目中使用它. Membershi ...
- 《AngularJS深度剖析与最佳实践》简介
由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文.毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持sh ...
- 探索c#之Async、Await剖析
阅读目录: 基本介绍 基本原理剖析 内部实现剖析 重点注意的地方 总结 基本介绍 Async.Await是net4.x新增的异步编程方式,其目的是为了简化异步程序编写,和之前APM方式简单对比如下. ...
- ASP.NET Core管道深度剖析（2）：创建一个“迷你版”的管道来模拟真实管道请求处理流程
从<ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求>我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从总体设计来讲是非常简单的,但 ...
- [C#] 走进异步编程的世界 - 剖析异步方法（上）
走进异步编程的世界 - 剖析异步方法(上) 序 这是上篇<走进异步编程的世界 - 开始接触 async/await 异步编程>(入门)的第二章内容,主要是与大家共同深入探讨下异步方法. 本 ...
- [C#] 走进异步编程的世界 - 剖析异步方法（下）
走进异步编程的世界 - 剖析异步方法(下) 序 感谢大家的支持,这是昨天发布<走进异步编程的世界 - 剖析异步方法(上)>的补充篇. 目录 异常处理 在调用方法中同步等待任务 在异步方法中 ...
- 计算机程序的思维逻辑 (29) - 剖析String
上节介绍了单个字符的封装类Character,本节介绍字符串类.字符串操作大概是计算机程序中最常见的操作了,Java中表示字符串的类是String,本节就来详细介绍String. 字符串的基本使用是比 ...
随机推荐
- python读取文件夹内所有图片名称，随机设置为桌面壁纸且把设置后的图片移到其他文件夹内的方法
关键词:读取文件夹.读取文件.操作系统.设置壁纸.移动文件 预期实现如下几个步骤 1.获取指定文件夹内所有图片名 2.随机取一张图片设置为壁纸 3.设置为壁纸的图片移动到另外一个文件夹中 第一步,获取 ...
- python，爬取小说网站小说内容，同时每一章存在不同的txt文件中
思路,第一步小说介绍页获取章节地址,第二部访问具体章节,获取章节内容 具体如下:先获取下图章节地址 def stepa(value,headers): lit=[] response = reques ...
- Robot Framework全局变量集合取值
在一次测试中,可能需要使用多个不同的会员,即需要多注册多个会员.如此配置单一参数化是无法满足对所有注册会员名的统一管理,这里引入参数变量组来实现 步骤如下: 1.脚本目录点击总目录,右键点击New R ...
- SpringBoot事件和监听器
事件和监听器 生命周期监听 场景:监听应用的生命周期 监听器-SpringApplicationRunListener 自定义SpringApplicationRunListener来监听事件: 1. ...
- 【MOOC】华中科技大学计算机组成原理慕课答案-第二章-数据表示
单选 1 计算机中表示地址时使用 √A. 无符号数 B. 反码 C. 原码 D. 补码 2 浮点数的表示范围和表示精确度分别取决于 A. 阶码的编码和尾数的编码 √B. 阶码的位数和尾数的位数 C. ...
- 代理模式-Proxy（动态代理）
代理模式(Proxy) 一.作用 又叫"动态代理" 为其他对象提供一种代理以控制对这个对象的访问 二.结构图 三.场景1 远程代理: 也就是为一个对象在不同的地址空间提供局部代表. ...
- JavaScript入门笔记day2
文章目录 常用互动方法 1. document.write() 直接向页面输出内容 2. `alert();`弹出消息对话框 3. confirm消息对话框 4. prompt弹出消息对话框,用于需要 ...
- AtCoder Beginner Contest 369 补题记录
A - 369 题意: 给定A和B,求有多少个x可以和A,B构成等差数列 思路: 分三种情况讨论 A == B 则x不得不与A和B想等 x位于A和B中间 只有B - A 为偶数才有这种情况存在 x位于 ...
- php伪随机数爆破
php伪随机数爆破 涉及到的函数为mt_rand() mt_rand(min, max) 返回min到max之间的伪随机数,如果参数缺省,则返回0到RAND_MAX之间的伪随机数. 不同于常规的伪随机 ...
- 开发AR导航助手：ARKit+Unity+Mapbox全流程实战教程
引言 在增强现实技术飞速发展的今天,AR导航应用正逐步改变人们的出行方式.本文将手把手教你使用Unity+ARKit+Mapbox开发跨平台AR导航助手,实现从虚拟路径叠加到空间感知的完整技术闭环.通 ...