LESS CSS使用方法 , CSS也能跟JS一样玩。

最新推荐文章于 2025-05-18 12:15:19 发布

原创最新推荐文章于 2025-05-18 12:15:19 发布 · 1.1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #less #前端 #框架 #webAPP

HTML5 同时被 3 个专栏收录

5 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

CSS3

1 篇文章

订阅专栏

LESS是一种CSS预处理器，它为CSS引入了变量、混入等特性，简化了CSS编写过程并提高了代码复用率。本文介绍LESS的基本使用方法，包括环境配置、变量定义与使用、作用域理解等内容。

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

在使用CSS的时候，总会有这个想法：
这个属性值老是重复写好烦。
这个属性值我在前面那个CSS文件中写过，好想直接拿过来用。
CSS能不能像其他程序性语言一样用一个变量来代替需要重复利用的内容呢。
鉴于以上的想法并非我一人会想到，只要是写过前端代码的肯定都会思考过这个问题，无奈CSS基本可以说没有语法可依循，于是LESS框架应运而生。

什么是LESS

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念
它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

LESS的原理

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

环境配置

以webStorm为例,在开始使用LESS之前你必须要安装以下环境

node.js
命令行输入“npm install -g less"安装less；
打开webstorm，File→Settings→Tools→File Watchers,点击右侧绿色“+”号

当然还有一种办法使用LESS就是直接使用HBuilder编辑器，自带LESS插件。

开始使用

以HBuilder为例，写LESS文件的时候会自动帮我们生成CSS文件。

![无

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link href="css/index.css" rel="stylesheet" />
	<body>
		<div class="index-home">
			<span>This is index</span>
		</div>
	</body>
</html>

CSS文件会自动生成，不用做任何修改，只需要修改LESS文件即可。

@index-color:red;
.index-home{
    box-sizing: content-box;
    background-color: @index-color;  
}

写完之后看一下index.css生成的代码。

是的背景色变成了红色，看一下运行效果。

这只能满足当前页面引用当前LESS文件中的变量，如果想引用其他变量则需要引用其他LESS文件，类似Java，引用一个类会用到关键字 import。

如果在index.less文件中去引用一个基类LESS文件，步骤：

1，写base-less.less

	@base-font-color:white;

在base-less文件中写一个base-font-color:white来控制文本颜色为白色
在index.less中引用，如

运行~

直接引用LESS文件

如果想要直接在客户端使用 .less（LESS 源文件），只需要从 http://lesscss.org下载 less.js 文件，然后在需要引入 LESS 源文件的 HTML 中加入如下代码：

LESS 源文件的引入方式与标准 CSS 文件引入方式一样：

<link rel="stylesheet/less" type="text/css" href="index.less">

另外LESS是作用域的
简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。

如：

 @width : 20px; 
 .index{ 
   @width : 30px; 
   .centerDiv{ 
       width : @width;// 此处应该取最近定义的变量 width 的值 30px 
              } 
 } 
 .leftDiv { 
     width : @width; // 此处应该取最上面定义的变量 width 的值 20px 
 }

最后，最后也是LESS最厉害的作用之一了，可以把LESS当成JS来玩。

@import "base-less.less";
@index-color: red;
.index-home {
    box-sizing: content-box;
    background-color: @index-color;
    color: @base-font-color;
    .marginTop(100px); 
}
.marginTop(@distance) {
    margin-top: @distance; 
}