Less

最新推荐文章于 2025-04-24 14:51:17 发布

好事总会发生在下个转弯

最新推荐文章于 2025-04-24 14:51:17 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： less

本文链接：https://blog.youkuaiyun.com/drawlessonsfrom/article/details/115420013

前端专栏收录该内容

73 篇文章

订阅专栏

本文介绍了Less，一种JavaScript编写的CSS预处理器，它提供了变量、继承、运算和函数等功能，使得CSS编写更加便捷。Less可以在客户端或服务端运行，并有多种编译工具如Koala、Codekit等。文章还详细讲解了如何使用变量、Mixin混入、内嵌规则以及运算，帮助提升CSS代码的可维护性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Less简介

1、Less是使用JavaScript语言编写的一种CSS预处理语言，它为CSS赋予了编程语言的特征，如变量、继承、运算、函数等。
2、Less既可以在客户端上运行，也可以借助Node.js或Rhino在服务端运行。
3、编译好的Less文件只有编译为CSS文件后才能被浏览器识别。

较为流行的Less编译工具：

Koala，全平台的Less/Sass编译工具，下载地址：http://koala-app.com/index-zh.html。
Codekit，MAC下自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含语法检查、图片优化、自动刷新等附加功能，下载地址：https://codekitapp.com/。
WinLess，Windows下的Less编译软件，下载地址：http://winless.org。
SimpleLess，全平台Less编译软件，适用于Windows、Linux和MAC操作系统。下载地址：https://cn.wordpress.org/plugins/simple-less-for-wordpress/

二、使用变量和操作符

在Less中，使用@关键字进行变量的定义。
示例：

@color: #4D926F;
#header {
	color: @color;
}

三、使用Mixin混入

Mixin的具体作用是把一些通用的定义抽取出来，以后就无须编写重复的代码。
示例：

.rounded-corners(@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	-ms-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}
#header {
	.rounded-corners;
}
#footer {
	.rounded-corners(10px);
}

Mixin的语法关键字是一个.符号，可以将其联想记忆为CSS选择器中的类。

四、内嵌规则

Less可以用嵌套的方式编写层叠样式。
示例：

#main {
	div li {
		list-style: none;
	}
	.container {
		margin: auto;
		width: 960px;
	}
}

这样可以使代码更为简洁，并且更易于维护。

五、运算

任何数字、颜色或者变量都可以参与运算。
示例：

@base: 5%;
@filter: @base * 2;
@other: @base + @filter;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filter;

Less的运算能够分辨出颜色和单位，例如：

@length: 1px + 7;

可以使用括号来改变运算的优先级：

width: (@var + 5) * 2;

可以在符合属性中进行运算：

border: (@width * 2) solid black;