当前位置： 首页 > news >正文

前端三大Css处理器之Less

news 2026/5/29 5:04:08

Less是Css预处理器之一，分别有Sass、Less、Stylus这三个。

       Lessicon-default.png?t=N7T8https://lesscss.org/        Less是用JavaScript编写的，事实上，Less是一个JavaScript库，他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。Less的少数缺点之一是它不支持函数。

Less的语法与Scss十分相似，只是在声明变量时，Less使用@而不是$sign。

        Sassicon-default.png?t=N7T8https://www.sass.hk/guide/        Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

        Stylusicon-default.png?t=N7T8https://www.stylus-lang.cn/        Stylus由Node.JS编写，与JS堆栈完美匹配。Stylus神兽Sass的逻辑能力和Less的简单性的影响。与Sass或Less版本相比，Stylus的一个优点就是它具有极其强大的内置功能，并且能够处理繁重的计算。

Less笔记：

JavaScript代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学无止境,永远对学习保持一种敬畏的态度!</title><link rel="stylesheet" type="text/css" href="./css/01.css">
</head><body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body></html>

Less样式代码：

// less变量
@c-pink: pink;
@mgn: margin;
@wrap: #wrap;// 混合
.juzhong(@width: 10px, @height: 10px, @color: skyblue){width: @width;height: @height;background: @color;// less中的嵌套规则// 注意点：一定要加&，否则会编译成父子关系，使用&:表示平级&:hover{background: @c-pink;}
}* {padding: 0;@{mgn}: 0;
}
/* 这是我想给用户看的注释 */
// 这是给程序员看的注释
@{wrap} {width: 500px;height: 500px;margin: auto;display: flex;justify-content: center;align-items: center;border: 1px solid skyblue;.inner {.juzhong(100px , 100px, red);}.inner2 {.juzhong(@color: gray);}
}// less中唯一有一点逻辑的地方：变量的延迟加载（看作用域）
@var: 0;
.wzh-1{@var: 1;.wzh-2 {@var: 2;three: @var;  // 3@var: 3;}one: @var;  // 1
}
// less中的嵌套规则// 注释// 变量  @开头
// @c-pink: pink;  color: @c-pink;
// @wrap: #wrap;   @{wrap} {}
// @margin: margin;  @{margin}: auto;// 场景：同一个大盒子下两个一模一样的小盒子，小盒子代码重复，如何复用？  混合即可高效解决
// less普通混合 ：  juzhong()
// 混合的样式会在css文件内显示// less不带输出混合： .juzhong()
// 混合的样式只在less文件内显示（给混合名字后面加上小括号即可，调用时也要加小括号）// 带参数并且带默认值的混合 .juzhong(x, y)  俗称mixin
// 只需要在 .juzhong(@width, @height, @color)
// 1、调用时需要接收形参
// 2、并且需要默认值// 命名参数混合
// 1、调用 .juzhong()函数时，它需要传三个参数，如果你只想要传参一个参数的话，就需要给参数命名；
// 2、命名参数这样使用: .juzhong(@color: black)  这样既可，如果不给参数命名，它会将颜色的值赋值到width宽度上去；// arguments变量   实参列表  具有length属性的对象叫做伪数组
// .juzhong(@w, @line, @color) { border: @arguments}// less计算： 加减乘除   计算时只需要一方带单位即可
.wzh-1{ width: (100 + 100px)}// 避免编译：像我们css中计算的一个方法calc，
// 因为它是浏览器自带的方法，它是会被自动识别并编译的，
// 所以我们不需要再让less去编译它，我们就可以使用 ~'' 将calc计算包起来，就会避免less编译这行计算样式
.lv{margin: 0;padding: ~'calc(100 + 100px)';
}

相关文章：

前端三大Css处理器之Less

Less是Css预处理器之一&#xff0c;分别有Sass、Less、Stylus这三个。 Lesshttps://lesscss.org/ Less是用JavaScript编写的&#xff0c;事实上&#xff0c;Less是一个JavaScript库&#xff0c;他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。Less的少数…...

编程日记 2023/9/4 4:49:49

Win 教程 Win7实现隔空投送

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…...

编程日记 2023/9/4 4:48:46

代码随想录算法训练营Day45 | 70. 爬楼梯 (进阶) | 322. 零钱兑换 | 279. 完全平方数

文章目录 70. 爬楼梯 (进阶)322. 零钱兑换二维数组滚动数组 279. 完全平方数 70. 爬楼梯 (进阶) 题目链接 | 理论基础 以完全背包的思路来解题&#xff0c;正如组合总和 Ⅳ 中提到的一样。在本题中&#xff0c;先背包后物品的思路就显得非常合理明显了。 本题中的物品就是可…...

编程日记 2023/9/4 4:47:46

算法训练营第四十一天（9.2）| 动态规划Part11：最长公共子序列

Leecode 1143.最长公共子序列 题目地址&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目类型&#xff1a;最长子序列 class Solution { public:int longestCommonSubsequence(string text1, string text2) {int m text1.size(), n t…...

编程日记 2023/9/4 4:46:45

k8s基于rbac权限管理serviceAccount授权管理

测试通过http访问apiServer curl没有证书不能通过https来访问apiServer需要使用kubectl代理 #使用kubectl代理 kubectl proxy --port8111& #curl访问 api/v1 是资源所属群组/版本 即创建资源时定义的apiVersion #后边跟的是要访问的资源 #查看所有命名空间 #查看核心资源用…...

编程日记 2023/9/4 4:45:43

linux URL访问工具

URL访问工具 有时候想在命令行下通过http访问接口/网页&#xff0c;可以使用curl来进行操作 发起请求 curl www.baidu.com 会返回网页内容 参数选项 -i参数 使用-i参数&#xff0c;会返回响应header curl -i www.baidu.com -I参数 使用-I参数&#xff0c;只会返回响应header cu…...

编程日记 2023/9/4 4:44:42

CCF-CSP 29次 第五题【202303-5 施肥】

计算机软件能力认证考试系统 题解&#xff08;35分&#xff09;&#xff1a; 枚举每个区间&#xff0c;再枚举每个施肥车&#xff0c;看所有的施肥车能不能把这个区间填满 #include<bits/stdc.h> using namespace std; const int N410; int n,m; typedef pair<int,…...

编程日记 2023/9/4 4:43:42

前端基础4——jQuery

文章目录 一、基本了解1.1 导入jQuery库1.2 基本语法1.3 选择器 二、操作HTML2.1 隐藏和显示元素2.2 获取与设置内容2.3 获取、设置和删除属性2.4 添加元素2.5 删除元素2.6 设置CSS样式 三、jQuery Ajax3.1 基本语法3.2 回调函数3.3 常用HTTP方法3.4 案例一3.4.1 准备工作3.4.2…...

编程日记 2023/9/4 4:42:40

测试人:“躺平?不可能的“, 盘点测试人在职场的优势

之前有这么一个段子&#xff1a;有人喜欢创造世界&#xff0c;他们做了程序员&#xff1b;有人喜欢拯救世界&#xff0c;他们做了测试员&#xff01;近几年&#xff0c;测试工程师在企业究竟是怎么样的发展&#xff1f;随着企业对于用户体验的满意度越来越重视&#xff0c;更加…...

编程日记 2023/9/4 4:41:39

C++：初识类与this指针

文章目录 前言一、类类的定义和实例化类的访问限定符类的作用域计算类的大小 二、类的成员函数的this指针总结 个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》 前言 一、类 类的定义和实例化 注意类定义结束时后面分号( ; )不能省略。 类…...

编程日记 2023/9/4 4:39:36

2023应届生java面试紧张失误之一：CAS口误说成开心锁-笑坏面试官

源于&#xff1a;XX网&#xff0c;如果冒犯&#xff0c;表示歉意 面试官&#xff1a;什么是CAS 我&#xff1a;这个简单&#xff0c;开心锁 面试官&#xff1a;WTF&#xff1f; 我&#xff1a;一脸自信&#xff0c;对&#xff0c;就是这个 面试官&#xff1a;哈哈大笑&#xff…...

编程日记 2023/9/4 4:38:33

Excel_VBA程序文件的加密及解密说明

VBA应用技巧及疑难解答 Excel_VBA程序文件的加密及解密 在您看到这个文档的时候&#xff0c;请和我一起念&#xff1a;“唵嘛呢叭咪吽”“唵嘛呢叭咪吽”“唵嘛呢叭咪吽”&#xff0c;为自己所得而感恩&#xff0c;为付出者赞叹功德。 本不想分享之一技术&#xff0c;但众多学…...

编程日记 2023/9/4 4:37:31

Flutter关于StatefulWidget中State刷新时机的一点实用理解

刚入门flutter开发&#xff0c;使用StatefulWidget踩了很多坑&#xff0c;就我遇到典型问题谈谈见解。 1.initState方法只会在控件初始化的时候执行一遍。 2.控件内部执行setState方法&#xff0c;则会每次执行build方法。 3.控件销毁会执行dispose方法&#xff0c;所以一些…...

编程日记 2023/9/4 4:36:31

CS420 课程笔记 P2 - 内存编辑和基础的 GameHacking 尝试

文章目录 IntroductionOperating SystemToolsMemory ScanningMemory ScanExamples!Conclusion Introduction 本节将介绍操作系统的基础知识和内存扫描&#xff0c;这可以说是 game hacking 中最重要的技能&#xff0c;我们不会深入讨论操作系统&#xff0c;因为这本身就是一门…...

编程日记 2023/9/4 4:35:29

【sql】MongoDB 查询 高级用法

【sql】MongoDB 查询 高级用法 一、基本查询指定字段 db.getCollection(students).find({}, {name: 1, score: 1}) 二、指定字段别名 db.getCollection(students).find({}, {"name":1, "score":1, "grade":"$grade.grade"}) 这里将…...

编程日记 2023/9/4 4:34:28

监督学习的介绍

一、定义 监督学习是利用一组已知类别的样本调整分类器的参数&#xff0c;使其达到所要求性能的过程&#xff0c;也称为监督训练或有教师学习。它是一种机器学习的方法&#xff0c;目的是让模型能够从已知的输入和输出之间的关系中学习&#xff0c;并且能够对新的输入做出正确…...

编程日记 2023/9/4 4:33:27

【DRONECAN】（三）WSL2 及 ubuntu20.04 CAN 驱动安装

【DRONECAN】&#xff08;三&#xff09;WSL2 及 ubuntu20.04 CAN 驱动安装 前言 这一篇文章主要介绍一下 WSL2 及 ubuntu20.04 CAN 驱动的安装&#xff0c;首先说一下介绍本文的目的。 大家肯定都接触过 ubuntu 系统&#xff0c;但是我们常用的操作系统都是 Windows&#x…...

编程日记 2023/9/4 4:32:26

Databricks 入门之sql（二）常用函数

1.类型转换函数 使用CAST函数转换数据类型&#xff08;可以起别名&#xff09; SELECTrating,CAST(timeRecorded as timestamp) FROMmovieRatings; 支持的数据类型有&#xff1a; BIGINT、BINARY、BOOLEAN、DATE 、DECIMAL(p,s)、 DOUBLE、 FLOAT、 INT、 INTERVAL interva…...

编程日记 2023/9/4 4:31:24

Simulink建模与仿真（3）-Simulink 简介

分享一个系列&#xff0c;关于Simulink建模与仿真&#xff0c;尽量整理成体系 1、Simulink特点 Simulink是一个用来对动态系统进行建模、仿真和分析的软件包。使用Simulink来建模、分析和仿真各种动态系统(包括连续系统、离散系统和混合系统)&#xff0c;将是一件非常轻松的事…...

编程日记 2023/9/4 4:30:22

（超简单）将图片转换为ASCII字符图像

将一张图片转换为ASCII字符图像 原图&#xff1a; 效果图&#xff1a; import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileWriter; import java.io.IOException;public class ImageToASCII {/*** 将图片转换为A…...

编程日记 2023/9/4 4:29:21

保姆级教程：在ArcGIS Pro插件中集成你的自定义工具箱（以‘消除重复要素’为例）

从脚本到按钮&#xff1a;ArcGIS Pro插件开发实战指南 在GIS日常工作中&#xff0c;我们常常会遇到一些重复性的数据处理任务。比如数据质检环节的"消除重复要素"操作&#xff0c;虽然可以通过Python脚本实现&#xff0c;但每次都需要打开IDE或Python窗口执行代码&am…...

编程新知 2026/5/26 4:42:23

Yokogawa AAI835-H50/K4A00模拟输入/输出模块

Yokogawa AAI835-H50/K4A00 模拟输入/输出模块产品特点&#xff1a;通道配置&#xff1a;共8个通道&#xff0c;含4路模拟输入和4路模拟输出。信号类型&#xff1a;所有通道均支持4-20mA标准电流信号。HART通信&#xff1a;支持HART协议&#xff0c;可与智能现场设备双向数字通…...

编程新知 2026/5/26 2:41:38

Hirschmann RS20-0800M4M4SDAE工业以太网交换机

Hirschmann RS20-0800M4M4SDAE 工业以太网交换机产品特点&#xff1a;端口配置&#xff1a;共8个端口&#xff0c;含6个RJ45电口和2个ST光纤接口。端口速率&#xff1a;所有端口均为100Mbps快速以太网。光纤类型&#xff1a;2个光纤端口为多模、ST接头。管理类型&#xff1a;二…...

编程新知 2026/5/26 2:41:36

【DeepSeek事件驱动架构实战指南】：20年架构师亲授5大核心陷阱与避坑清单

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;DeepSeek事件驱动架构全景认知 DeepSeek事件驱动架构&#xff08;Event-Driven Architecture, EDA&#xff09;并非单一技术组件的堆叠&#xff0c;而是一种以事件为第一公民、强调松耦合与异步协作的系统设计…...

编程新知 2026/5/26 0:42:31

AI算力要上天？别笑，太空数据中心真能干翻地球电费！

前言你有没有算过&#xff0c;训练一个大模型&#xff0c;相当于烧掉多少吨煤&#xff1f;如今AI狂飙突进&#xff0c;算力需求指数级增长&#xff0c;可地球上的电——不够用了&#xff01;更别说建个数据中心还得跟地方政府“斗智斗勇”&#xff0c;抢地皮、配储能、扛审批&a…...

编程新知 2026/5/25 23:27:16

开源 AI Agent Harness Engineering 框架全览：LangChain, AutoGPT, CrewAI 孰优孰劣？

开源 AI Agent Harness Engineering 框架全览：LangChain, AutoGPT, CrewAI 孰优孰劣？ 关键词 AI Agent Harness Engineering、大语言模型编排（LLM Orchestration）、LangChain、AutoGPT、CrewAI、工具调用（Tool Calling）、多Agent协作、自主任务规划 摘要 随着大语言模型…...

编程新知 2026/5/25 22:52:44

16个分片+2副本：pg_shard的master_create_worker_shards最佳实践

16个分片2副本&#xff1a;pg_shard的master_create_worker_shards最佳实践 【免费下载链接】pg_shard ATTENTION: pg_shard is superseded by Citus, its more powerful replacement 项目地址: https://gitcode.com/gh_mirrors/pg/pg_shard pg_shard作为PostgreSQL的分…...

编程新知 2026/5/25 21:31:51

Unity项目DrawCall降不下来？试试用Mesh Baker合并贴图集，保姆级图文教程

Unity性能优化实战&#xff1a;用Mesh Baker合并贴图集降低DrawCall全流程解析当你的Unity项目帧率开始卡顿&#xff0c;Profiler里DrawCall数字居高不下时&#xff0c;合并贴图集往往是解决问题的关键一步。本文将以一个实际项目为例&#xff0c;带你从零开始使用Mesh Baker的…...

编程新知 2026/5/25 20:55:13

API渗透测试：契约驱动的协议/语义/架构三层攻防

1. 为什么“API渗透测试”不是Web渗透的简单延伸&#xff1f;很多人刚接触API安全时&#xff0c;第一反应是&#xff1a;“不就是把Burp Suite抓到的HTTP请求换个参数发一发&#xff1f;跟测网页表单差不多。”我2018年第一次接手某金融类SaaS平台的API安全评估时&#xff0c;也…...

编程新知 2026/5/25 17:13:03

PDF差异对比神器diff-pdf：告别文档核对烦恼，提升工作效率的智能解决方案

PDF差异对比神器diff-pdf&#xff1a;告别文档核对烦恼&#xff0c;提升工作效率的智能解决方案 【免费下载链接】diff-pdf A simple tool for visually comparing two PDF files 项目地址: https://gitcode.com/gh_mirrors/di/diff-pdf 你是否曾在核对PDF文档时感到头疼…...

编程新知 2026/5/25 15:23:54