less的四种使用方法介绍

叁歲伎倆 2022-05-24 11:08 399阅读 0赞

## 1、直接引入less.js ##

使用步骤：

1、到less官网，下载less文件

2、在编译器中新建一个less文件，引入到我们的html页面中（注意下面的和css的引入方式稍微有些不同哦，看rel）

<link href="css/style.less" rel="stylesheet/less"/>

3、引入我们下载的less文件

<script src="js/less.min.js"></script>

然后就可以使用了

好处：能获取到客户端的数据，从而进一步计算

坏处：在客户端解析less，造成性能浪费，不利于维护（不推荐）

## 2、koala编译器 ##

使用步骤：

1、在koala-app.com中下载软件就可以

2、打开koala软件，然后将我们的less所在的文件夹拖拽到软件中

3、koala会自动读到less文件，然后点击less文件，单击右键，选择输出的路径以及编译后的css文件名，之后在右侧菜单栏点击执行编译即可（上面的选项，只要把自动编译勾选即可，输出方式可以选择normal也可以选择compress（压缩）的方式，搜可以，其他的不需要管）

4、编译成功，会在我们指定的文件夹中生成一个css文件，之后将这个css文件引入我们的html文件中即可

（推荐小白使用）

## 3、在服务器环境编译  利用node中的包管理器 ##

使用步骤：

1、需要下载安装node环境，检测安装成功的方法在命令行输入npm，如果安装成功就会有一些信息，错了，就会报错

简单说一下打开命令行的方法（windows系统）win+R——输入cmd——enter——进入命令行——输入npm——按enter键

安装less:在命令行输入命令：npm i  -g less@lateast之后按回车即可（检验是否安装成功，在命令行输入lessc，然后回车，安装成功会有一些信息，失败也会报错）

然后在命令行中进入我们存放less文件所在的文件夹，进入之后输入（如果我们的less文件名为style.less）lessc  style.less > index.css（大于号后面是我们想要style.less编译为的css的文件名，我们这里把它命名为index.css）之后点击回车，我们的文件夹就会多一个index.css文件，之后也是引入css文件即可

## 4、在编译器中实时编译（配置稍微麻烦，但本人比较喜欢这一种） ##

这种方法也需要安装node，之后用npm安装less，和上面的安装方法一样

win+R——输入cmd——enter——进入命令行——输入npm——按enter键——npm i  -g less@lateast之后按回车即可

然后打开我们的编译器（以webstorm为例，其他的也都大同小异）

点击文件（File）——找到Tools——File Watchers——找到右侧有个加号（+）——单击加号找到less选择less——弹出一个菜单，找到Program:后面让选择程序，找到我们安装的less程序

注：找到程序的方法：先找到C盘——users——用户（也可能是你的名字,自己起的）——AppData（如果这里找不到的话，可以找到这个菜单上面几个图标中的最后一个（Show Hidden Files and Directiories）即可找到）——Roaming——npm——lessc.cmd，选中之后，其它的不用管直接点击ok，然后再点ok即可

之后我们再去建一个less文件，它就会自动生成一个同名的css文件，把这个css文件引入我们的HTML文件中即可

我比较喜欢第四种，在实际的项目中，比较推荐的也是最后两种方法，对于初学者可能稍微麻烦，但熟悉之后就特别简单了

发表评论取消回复

表情：

评论列表（有 0 条评论，399人围观）

还没有评论，来说两句吧...

相关阅读

相关 Less的几种使用方法

在Vue中使用Less 1、安装依赖处理普通的.css 文件，需要安装css-loader,style-loader 　　　　.less 文件，需要安装 le

青旅半醒/ 2023年07月06日 14:37/ 0 赞/ 15 阅读

相关消息队列使用的四种场景介绍

一、消息队列中间件简介概念：消息队列中间件，是分布式系统中重要的组件，主要解决：应用耦合，异步消息，流量削锋等问题目的：实现高性能，高可用，可伸缩和最终一致性架构

╰+攻爆jí腚メ/ 2023年06月23日 05:54/ 0 赞/ 14 阅读

相关消息队列使用的四种场景介绍

一、简介消息队列中间件是分布式系统中重要的组件，主要解决应用耦合，异步消息，流量削锋等问题实现高性能，高可用，可伸缩和最终一致性[架构][Link 1] 使用较多

﹏ヽ暗。殇╰゛Y/ 2022年09月04日 06:47/ 0 赞/ 192 阅读

相关消息队列使用的四种场景介绍

消息队列中间件是分布式系统中重要的组件，主要解决应用耦合，异步消息，流量削锋等问题实现高性能，高可用，可伸缩和最终一致性[架构][Link 1] 使用较多的消息队列有Ac

超、凢脫俗/ 2022年06月14日 07:56/ 0 赞/ 226 阅读

相关 less的使用介绍（一）

Less 类似的预处理css语言还有 Sass styuls等等 > 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点 > [官网][Link

àì夳堔傛蜴生んèń/ 2022年06月13日 08:40/ 0 赞/ 191 阅读

相关消息队列使用的四种场景介绍

消息队列中间件是分布式系统中重要的组件，主要解决应用耦合，异步消息，流量削锋等问题实现高性能，高可用，可伸缩和最终一致性[架构][Link 1] 使用较多的消息队列有Ac

àì夳堔傛蜴生んèń/ 2022年06月09日 00:40/ 0 赞/ 205 阅读

相关 less的四种使用方法介绍

1、直接引入less.js 使用步骤： 1、到less官网，下载less文件 2、在编译器中新建一个less文件，引入到我们的html页面中（注意下面的和css的引入

叁歲伎倆/ 2022年05月24日 11:08/ 0 赞/ 400 阅读

相关消息队列使用的四种场景介绍

消息队列中间件是分布式系统中重要的组件，主要解决应用耦合，异步消息，流量削锋等问题实现高性能，高可用，可伸缩和最终一致性[架构][Link 1] 使用较多的消息队列有Ac

蔚落/ 2022年05月16日 11:43/ 0 赞/ 221 阅读

相关消息队列使用的四种场景介绍

一、消息队列介绍消息队列中间件是分布式系统中重要的组件，主要解决应用耦合，异步消息，流量削锋等问题实现高性能，高可用，可伸缩和最终一致性架构使用较多的消息队列有

ゞ浴缸里的玫瑰/ 2022年01月31日 16:11/ 0 赞/ 295 阅读

相关消息队列使用的四种场景介绍

消息队列中间件是分布式系统中重要的组件，主要解决应用耦合，异步消息，流量削锋等问题实现高性能，高可用，可伸缩和最终一致性[架构][Link 1] 使用较多的消息队列有Ac

太过爱你忘了你带给我的痛/ 2021年09月16日 07:18/ 0 赞/ 349 阅读