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

Less预处理器教程

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学,可以点心心支持一下哈

一、Less介绍

less官方文档 lesscss.org/

less中文文档 less.bootcss.com/

less是一种css预处理器,它扩展了css语言,提供了变量、嵌套、混合、运算等功能,使样式表的编写更加灵活和高效,用来书写css的工具。

通俗的说,less是一种专门编写css代码的语言(工具),通过less来编写css代码变得更灵活,更高效,更容易维护。

二、什么是预处理(预编译)

预处理(或预编译)就像在做甜点之前,你有一份简单的食谱(css),但你想要加入一些特殊的烘焙材料,以便更方便地制作美味的点心。less 就是你的烘焙助手,负责在烘焙之前对这份食谱进行一些特殊的处理,通过预处理,让你更轻松、更有创意地制作出令人垂涎欲滴的点心。 预处理就可以将less文件代码转换为css代码。

注意在less文件中,less代码格式并不能被浏览器识别。想将less文件代码变成css代码,必须先将这个less文件预先进行处理

三、Less的使用

1. 安装Less

首先,确保你的项目中已经安装了less。你可以使用npm安装less:

npm install -g less

或者通过CDN在HTML文件中引入less:

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

2. 基础语法

变量

在LESS中,你可以使用变量来存储和重用值。变量以@符号开头。

@width: 100px;
@height: @width + 10px;#header {width: @width;height: @height;background-color: aqua;
}

在这个例子中,@width是一个变量,它的值是100px。在#header中,我们使用了这个变量来设置背景颜色。

嵌套

LESS允许你使用嵌套规则,使样式表更加清晰和结构化。

nav {ul {margin: 0;padding: 0;list-style: none;}li {display: inline-block;margin-right: 5px;a {text-decoration: none;&:hover {text-decoration: underline;color: red;}}}
}

在这个例子中,nav规则包含了嵌套的ul、li和a规则。这样可以更容易地理解和组织样式。

混合(Mixin)

混合允许你在一个样式规则中引入另一个样式规则的属性。

.border-radius(@radius) {border-radius: @radius;-webkit-border-radius: @radius;-moz-border-radius: @radius;
}.button {.border-radius(5px);
}

在这个例子中,.border-radius是一个混合,它接受一个@radius参数,并在.button规则中使用该混合来添加圆角边框。

导入其他Less文件

你可以使用@import导入其他less文件,将样式表模块化。

@import "reset";
@import "variables";
@import "mixins";

这个例子展示了如何导入名为reset.less、variables.less和mixins.less的文件。这样可以将样式表分割成更小的部分,使代码更易维护。

3. 运算

less允许进行基本的数学运算,这对于处理尺寸和颜色等方面很有用。

@base: 30px;
@padding: @base * 2;.element {margin: @base + 5px;padding: @padding;background-color: aqua;
}

在这个例子中,@padding的值是@base乘以2。less会自动计算结果,你可以在样式规则中直接使用这些运算结果。

4. 函数与操作

less内置了一些函数和操作,用于处理颜色、字符串和其他数据类型。

@color: #3498db;.darken-bg(@color, @percent) {background-color: darken(@color, @percent);
}.container {.darken-bg(@color, 10%);
}

在这个例子中,darken是less内置的颜色函数,我们通过darken函数降低背景颜色的亮度。

5. 条件语句

less支持使用条件语句,根据条件选择应用样式。

@width: 100px;.condiction {width: @width;height: @width;& when (@width > 500) {background-color: red;}& when (@width <= 500) {background-color: blue;}
}

在这个例子中,使用& when语法根据@width的值应用不同的背景颜色。

6. 循环

less还支持循环,允许你重复应用样式。

.loop(@counter) when (@counter > 0) {.class-@{counter} {width: @counter * 10px;}.loop(@counter - 1);
}.loop(5);

在这个例子中,.loop混合使用了递归来创建一系列带有不同宽度的样式类。

7.嵌套规则的作用域

嵌套规则在less中有自己的作用域,这意味着你可以更灵活地组织样式。

#header {h1 {font-size: 26px;}
}#footer {h1 {font-size: 18px;}
}

在这个例子中,h1规则在#header和#footer中分别有不同的作用域。

8.字符串插值

字符串插值允许你在样式中动态使用变量。

@property: color;.widget {@{property}: #888;background-@{property}: red;
}

在这个例子中,使用@{}语法插入变量,创建动态的属性名称。

9. 编译Less

要在本地编译 less 文件,你可以使用 lessc 命令行工具。首先,确保你已经在终端或命令提示符中安装了 less:npm install less -g

然后,在less文件所在目录运行以下命令:

lessc your-styles.less output.css

其中,your-styles.less 是你的less文件,output.css 是输出的css文件。 或者使用构建工具,如webpack、gulp等,配置相应的less插件进行自动编译。 编译完成后,你可以在浏览器中链接到生成的css文件,以查看效果。

相关文章:

Less预处理器教程

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学&#xff0c;可以点心心支持一下哈 一、Less介绍 less官方文档 lesscss.org/ less中文文档 less.bootcss.com/ less是一种css预处理器&#xff0c;它扩展了css语言&#xff0c…...

PCL 计算点云AABB包围盒的体积

目录 一、AABB包围盒二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,原文链接。爬虫自重,把自己当个人。 一、AABB包围盒 AABB包围盒又称了 轴对齐包围盒,是点云包围盒里最简单的一种,其计算方法也极其简单。获取包围盒之后,根据包围盒的长宽高进行体积计算即…...

论软件测试工程师 重要性!

在生活中&#xff0c;我们常常会遇到以下几种窘迫时刻&#xff1a; 准备骑共享单车出行&#xff0c;却发现扫码开锁半天&#xff0c;车子都没有反应&#xff1b;手机导航打车&#xff0c;却发现地图定位偏差很大&#xff0c;司机总是跑错地方&#xff1b;买个水&#xff0c;却…...

防御第六次作业-防火墙综合实验(av、url过滤、dns过滤)

目录 拓扑图&#xff1a; 要求&#xff1a; 8 9 10 11 拓扑图 要求 前7个要求在上一篇博客&#xff1b; 8.分公司内部的客户端可以通过域名访问到内部的服务器 9.假设内网用户需要通过外网的web服务器和pop3邮件服务器下载文件和邮件&#xff0c;内网的FTP服务器也需要…...

打码半年,开源一款自定义大屏设计软件!

hi&#xff0c;大家好&#xff0c;我是Tduck马马。 最近我们开源了一款大屏软件-TReport&#xff0c;与大家分享。 TReport是一款基于Vue3技术栈的数据可视化系统&#xff0c;支持静态、动态api等数据源&#xff1b;可用于数据可视化分析、报表分析、海报设计使用。 提供自定…...

云计算基础-大页内存

大页内存功能概述 什么是大页内存 简单来说&#xff0c;就是通过增大操作系统页的大小来减小页表&#xff0c;从而避免快表缺失 主要应用场景 主要运用于内存密集型业务的虚拟机&#xff0c;比如对于运行数据库系统的虚拟机&#xff0c;采用HugePages(大页)后&#xff0c;可…...

数据结构-邻接链表

介绍 邻接矩阵是运用较多的一种储存图的方法&#xff0c;但如果一张网图边数较少&#xff0c;就会出现二维矩阵中大部分数据为0的情况&#xff0c;浪费储存空间 为了避免空间浪费&#xff0c;也可以采用数组与链表结合的方式来存储图 假设有这样一张图 我们可以先用一个数组…...

十三、集合进阶——单列集合 及 数据结构

单列集合 及 数据结构 13.1 集合体系结构13.1.2 单列集合1. Collection2.Collection 的遍历方式迭代器遍历增强for遍历Lambda表达式遍历 3.List集合List集合的特有方法List集合的遍历方式五种遍历方式对比 4.数据结构1).栈2).队列3&#xff09;数组4&#xff09;链表小结5&…...

Android | ArcGIS入门

一、概述 ArcGIS是由Esri开发的地理信息系统&#xff08;GIS&#xff09;软件。它用于制图、空间分析和数据可视化。ArcGIS允许用户以各种格式创建、管理、分析和共享地理信息。它通常用于城市规划、环境管理和应急响应等领域。该软件包括一系列工具&#xff0c;用于创建地图、…...

dockerfile文件书写

1.dockerfile构建nginx镜像 1.1书写dockerfile文件 mkdir nginx #创建nginx目录 cd nginx vim dockerfile # 修改文件FROM centos # 基础镜像&#xff0c;默认最新的centos8操作系统 MAINTAINER xianchao # 指定镜像的作者信息 RUN rm -rf /etc/yum.repos.d/* # centos8默认…...

蓝桥杯-整数删除

给定一个长度为 N 的整数数列&#xff1a;A1, A2, ... , AN。你要重复以下操作 K 次&#xff1a; 每次选择数列中最小的整数&#xff08;如果最小值不止一个&#xff0c;选择最靠前的&#xff09;&#xff0c;将其删除。 并把与它相邻的整数加上被删除的数值。 输出 K 次操作后…...

以程序员的视角,看前后端分离的是否必要?

Hello&#xff0c;我是贝格前端工场&#xff0c;本篇分享一个老生常谈的话题&#xff0c;前后端分离是必然趋势&#xff0c;但也是要区分具体的场景&#xff0c;欢迎探讨&#xff0c;关注&#xff0c;有前端开发需求可以私信我&#xff0c;上车了。 一、什么是前后端分离和不分…...

Linux:sed进阶(12)

Linux&#xff1a;shell脚本&#xff1a;基础使用&#xff08;5&#xff09;《正则表达式-sed工具》_linux脚本表达式s-CSDN博客https://blog.csdn.net/w14768855/article/details/132347574?ops_request_misc%257B%2522request%255Fid%2522%253A%252217084222871680019707523…...

Linux命令-builtin命令(执行bash内建命令)

说明 用于执行指定的bash内建命令。builtin 命令调用的bash内建命令优先于同名的外部命令及同名的shell函数。 语法 builtin [shell-builtin [arg ...]]参数 shell-builtin&#xff08;可选&#xff09;&#xff1a;要调用的bash内建命令。 arg&#xff08;可选&#xff09…...

HTML的特殊字符

HTML的特殊字符 有些特殊的字符在 html 文件中是不能直接表示的&#xff0c;例如: 空格&#xff0c;小于号(<)&#xff0c;大于号(>)&#xff0c;按位与(&)。 空格 示例代码&#xff1a; 运行结果&#xff1a; 由于html 标签就是用 < > 表示的&#xff0…...

内核移植学习

内核移植 内核移植就是指将RT-Thread内核在不同的芯片架构、不同的板卡上运行起来。 移植可分为CPU架构移植和BSP板级支持包移植两部分。 CPU架构移植 在嵌入式领域有多种不同CPU架构&#xff0c;例如Cortex-M、ARM920T、MIPS32、RISC-V等等。 为了使RT-Thread能够在不同C…...

Mysql 两个日期相减得到指定的格式数据

首先避坑&#xff1a; Mysql 中两个日期直接相减&#xff0c;若在同一天则得到的是秒&#xff0c;否则相减得到的并不是秒&#xff0c;一定要注意。 函数 TIMESTAMPDIFF(unit,begin,end); 函数返回 begin - end 的结果。 其中 begin 和 end 是 DATE 或 DATETIME 表达式。 …...

第六十四天 服务攻防-框架安全CVE复现Apache shiroApache Solr

第六十四天 服务攻防-框架安全&CVE复现Apache shiro&Apache Solr 知识点: 中间件及框架列表: IIS,Apache,Nginx,Tomcat,Docker,K8s,Weblogic.JBoos,WebSphere, Jenkins,GlassFish,Jetty,Jira,Struts2,Laravel,Solr,Shiro,Thinkphp,Spring, Flask,jQuery等 1、开发框…...

JavaScript 设计模式之享元模式

享元 将一部分共用的方法提取出来作为公用的模块 const Car {getName: function () {return this.name},getPrice: function (price) {return price * 30} }const BMW function (name, price) {this.name namethis.price price } BMW.prototype Car const bmw new BMW(…...

利用故事推动企业变革:如何提升数据分析技能

单一的数据和表格尽管有算法的支撑&#xff0c;但在其表达方式上总会让人感到头疼。当我们需要深入了解企业的盈利能力&#xff0c;或是尝试评估业务的增长机会时&#xff0c;以往都会将精力全部放在分析数字、阅读信息、回顾历史和沟通交流之上&#xff0c;却忽略随之而生成的…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Bean 作用域有哪些?如何答出技术深度?

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

Vue3 hooks

export default function(){ let name; function getName(){ return name; } return {name,getName} } use it ----------------------------------------------- import useName from hooks/useName const {name,getName} useName(); 这段代码展示了一个自定义 Vue3钩…...