less
less介绍
less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，
增加了变量、Mixin、函数等特性，使CSS更易维护和扩展
LESS既可以在客户端上运行，也可以借助Node.js在服务端运行。
less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/
颜色对照表：https://www.sioe.cn/yingyong/yanse-rgb-16/
less的安装引入
-
直接引用（不推荐）
-
在引入之前，我们需要创建一个 Less 文件，Less 文件的后缀名为
.less，所以我们可以将文件命名为index.less。 -
然后我们就可以通过
<link>标签向 HTML 页面中引入index.less文件，和引入 CSS 文件类似，但是需要将type属性的值修改为text/less<link rel="stylesheet/less" type="text/less" href="./index.less" /> -
然后下载使用官方提供的 CDN 进行脚本引入
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
-
-
通过NPM安装（不推荐）
-
vscode安装（推荐）
- 打开VSCode编辑器，安装
Easy LESS插件 - 在文件夹中新建less文件，然后保存，即可在当前文件夹中编译出相应的css文件。
- 打开VSCode编辑器，安装
引入案例
使用less.js的使用方式
-
less
body { background-color: red; } -
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./index.less" type="text/less"> <style type="text/less"> #box{ width: 100px; height: 100px; background-color: pink; .con{ width: 50px; height: 50px; background-color: green; } } </style> </head> <body> <div id="box"> <div class="con"></div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.13.0/less.js"></script> </body> </html>
不使用less.js的使用的方式
-
less
body{ background-color: aquamarine; } -
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./Untitled-1.css"> </head> <body> </body> </html>
Less编译工具
koala官网:www.koala-app.com
less中的注释
单行注释，不会被编译到css文件中 // <!-- -->
多行注释会被编译到css文件中 /**/
less中的变量
使用@来声明一个变量：@pink：pink;
1.作为普通属性值来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载
- (less中的变量加载是有延迟的;它会等css样式加载完之后再执行加载)
less中的嵌套规则
1.基本嵌套规则
嵌套规则允许在一个选择器中嵌套另一个选择器
父选择器&的使用
&作为选择器使用
parent{
&:first-child{ //parent下的第一个子元素
}
}
&作为选择器使用的特殊情况
将&用在一个使用逗号分隔的选择器列表中，可以产生列表中所有选择器的所有可能的排列，这被称作组合爆炸。如：
p,a,ul{
border-top:2pxdotted#366;
&+&{
border-top:0;
}
}
上述列表中有3个选择器，列表中所有选择器的所有可能的排列，将有9种可能。编译后的CSS代码为：
p,
a,
ul{
border-top:2pxdotted#366;
}
p+p,
p+a,
p+ul,
a+p,
a+a,
a+ul,
ul+p,
ul+a,
ul+ul,{
border-top:0;
&放选择器后面
还可以将&放在一个选择器的后面，来改变选择器的顺序，将当前选择器排列到最前面。如：
.header{
.menu{
border-radius:5px;
.no-borderradius&{
background-image:url('images/button-background.png');
}
}
}
选择器.no-borderradius&会使.no-borderradius置于他的父选择器.header.menu的前面，形成.no-borderradius.header.menu的结构。编译后的CSS代码为：
.header .menu{
border-radius:5px;
}
.no-borderradius .header .menu{
background-image:url('images/button-background.png');
}
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
.myMixin1 {
color: green;
}
.allMixin {
.myMixin1;
}
//输出
.myMixin1 {
color: green;
}
.allMixin {
color: green;
}
2.不带输出的混合
如果要创建一个mixin，但是又不想要输出mixin的话，我们可以在它的后面加上一个括号。
.myMixin1 {
color: green;
}
.myMixin2() {
background: red;
}
.allMixin {
.myMixin1;
.myMixin2;
}
// 输出
.myMixin1 {
color: green;
}
.allMixin {
color: green;
background: red;
}
3.带参数的混合
.myMixin(@color) {
background: @color;
}
.allMixin {
.myMixin(red);
}
//输出
.allMixin {
background: red;
}
4.带参数并且有默认值的混合
.myMixin(@color:red) { //不给color传实参默认为red,传实参覆盖red值
background: @color;
}
.allMixin {
.myMixin(blue);
}
//输出
.allMixin {
background: blue;
}
5.带多个参数的混合
同4,5
6.命名参数
.myMixin(@w:100px,@h:100px,@c:red) {
background: @color;
}
.allMixin {
.myMixin(@c:blue); //指定形参c的值为blue
}
//输出
.allMixin {
background: blue;
}
7.匹配模式
// @_ 表示匹配所有,只要调用了triangle,就会调用有 @_ 的样式
// @_ 表示通用的匹配模式
// 什么是通用匹配模式:
// 就是无论哪一个混合被匹配了,都会执行通用匹配模式中的代码
.triangle(@_,@width,@color) {
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Down,@width,@color) {
border-width: @width;
border-color: @color transparent transparent transparent;
}
.triangle(Top,@width,@color) {
border-width: @width;
border-color: transparent transparent @color transparent;
}
div{
.triangle(Down,80px, blue);
}
//输出
div{
width: 0;
height: 0;
border-style: solid solid solid solid;
border-width: 80px;
border-color: blue transparent transparent transparent;
}
8.arguments变量
@arguments 在JavaScript中代表所有的参数，在mixin内部同样有特殊含义，它包含调用mixin时传递的所有参数；如果我们不想处理单个参数，它将会非常适用。
.box-shadow(@x: 0; @y: 0; @blur: 20px; @color: green) {
box-shadow: @arguments;
}
.argVar {
.box-shadow(2px; 11px);
}
// 输出
.argVar {
box-shadow: 2px 11px 20px green;
}
重载
多个同名的混合,拥有不同的功能，可以根据调用的时候传入的实参个数选择匹配哪个混合
.main(@w) {
width: @w;
}
.main(@w, @h) {
width: @w;
height: @h;
}
.outer {
//重载：根据参数个数不同，来匹配不同的混合
.main(100px, 100px)
}
// 输出
.outer {
width: 100px;
height: 100px;
}
守卫
根据判断条件选择使用哪个混合
类似于JavaScript的if/else，使用when语法
我们可以使用>,>=,<,<=,=,以及关键字true（只匹配关键字true，非true不会匹配），
支持逻辑与and 和或,以及非not ()
.main(@w) when(@w>1000),(@w<200) {
width:~"@{w}px";
height: 100px;
}
.main(@w) when(@w<=1000) and (@w>=200) {
width:~"@{w}px";
height: 50px;
}
.main(@b) when(not(@b<=30)){
background: red;
}
.outer {
.main(3000)
}
//输出
.outer {
width:3000px;
height:100px;
}
2.8 字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中，通过@{name}这样的结构:
@h: 30;
@baseUrl: "http://redromance.vip:6666/";
.outer {
//变量加单位，字符串拼接 再转义
//@{h}在字符串中书写变量
//~转义 把字符串转成css可用代码
height:~"@{h}px";
//字符串插值
background: url("@{baseUrl}01.png")
}
.con {
background: url("@{baseUrl}02.png")
}
less运算
运算类型：任何数值，颜色，变量都可以运算
算除法时,需要将要计算的表达式用()包裹起来
单位 : 在进行任意运算时会发生单位转换,单位以从左向右第一个遇到的单位为准
在进行颜色计算时,会将颜色变成rgb(value,value,value)的形式,再将里面的value分开进行运算,再转成16进制,
如:#fff-20==>rgb(255-20,255-20,255-20)==>#ebebeb
注意：运算符与数值之间要以空格分开，涉及优先级时以（）进行优先级计算
less映射
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
输出符合预期：
.button {
color: blue;
border: 1px solid green;
}
less导入
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
less避免编译
有时候我们需要输出一些不正确的css语法或者使用less不认识的专有语法。要输出这样的值我们可以在字符串前加上一个~
.test_03{
width: 300px;
height: ~'calc(300px - 30px)';
}
输出
//输出
.test_03 {
width: 300px;
height: calc(300px - 30px);
}
less继承
性能比混合高
灵活度比混合低
假设有一个 .inline 的类：
.inline {
color: red;
}
现在希望 nav ul 选择器能够让继承 .inline类的 color 属性，就可以使用以下两种方式的任意一种来实现：
nav ul:extend(.inline) {
}
或者
nav ul {
&:extend(.inline);
}
这两种方式得到的结果完全相同，编译后的CSS代码为：
.inline,
nav ul {
color: red;
}
less函数
参考文献：https://www.cnblogs.com/zfc2201/p/3493335.html
-
逻辑函数
-
if
@c: boo; div { margin: if((2 > 1), 1, 0); color: if((iscolor(@c)), @c, black); } -
boolean
@c: boolean(2<1); div { margin: if(@c, 1, 0); }
-
-
字符串函数
-
escape
- 对字符串中的特殊字符做 URL-encoding 编码。
- 这些字符不会被编码：,, /, ?, @, &, +, ', ~, ! and $。
- 被编码的字符是：**, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =。
escape('a=1') // return a%3D1 -
e
用于对CSS的转义，与~"value"类似。它接受一个字符串作为参数，并原样返回内容(不含引号)。
它可用于输出一些不合法的CSS语法，或者是使用LESS不能识别的属性。
@mscode: "hello guigu"; .div{ width: e(@mscode); } -
format
div{ format-a-d:%('repetitions: %a file: %d', 1 + 2, "directory/file.less"); } -
replace
div{ content:replace("One + one = 4", "one", "2", "gi"); }
-
-
列表函数
-
length
p{ @list: "banana", "tomato", "potato", "peach"; n: length(@list); } -
extract
div{ @list: apple, pear, coconut, orange; value: extract(@list, 3); //3表示提取@list中的第几个值 } -
range
div{ value: range(4); //从1到4的遍历范围值，只能接受整数 }
-
-
数学函数
-
ceil
ceil(2.4) -
floor
floor(2.6) -
percentage
percentage(0.5) -
round
round(1.67) -
sqrt
sqrt(121) -
abs
abs(-18) -
pow
pow(5, 2); -
mod
mod(10,5) -
min
min(1,2,3,4,5) -
max
max(1,2,3,4,5)
-
-
类型函数
-
isnumber
isnumber(1); -
isstring
isstring('1')； -
iscolor
iscolor(#fff);
-
-
混调函数/杂项函数
-
color
color(red) -
image-size
image-size("file.png") 地址为本地地址 -
image-width
image-width("file.png"); -
image-height
image-height("file.png");
-
-
颜色调试【变浅或加深】
div{ v:hsl(90, 80%, 50%); //value: desaturate(hsl(90, 80%, 50%), 20%); value: desaturate(green, 20%); }
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现