编译less的四种方式以及node.js的安装

最新推荐文章于 2022-06-07 10:25:39 发布

F-ZERO-F

最新推荐文章于 2022-06-07 10:25:39 发布

阅读量6.1k

点赞数 2

分类专栏： HTML/CSS/LESS 文章标签： koala node.js的安装编译less

本文链接：https://blog.csdn.net/sun_DongLiang/article/details/82750773

版权

HTML/CSS/LESS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

背景：

众所周知css只是一门描述性语言，语言内部没有编程思想，而且他的写法也相对有些笨重，所以就会造成css代码中有大量的低逻辑的代码，非常不利于维护和扩展造成复用性太差。CSS预处理器随之产生：CSS预处理器用一种专门的编程语言，进行样式设计，然后再编译成CSS文件，以供使用；目前使用普遍的css预处理器的编程语言有less sass等；（这些语言有了编程思想，有了逻辑就会提升复用性和可维护性）
美中不足的是浏览器不能直接读取less文件，只有将less文件编译成css文件之后才可以被使用；因此由于这一系列的原因，如何编译less文件就成了使用less书写css代码的重点之一；
在这里将会介绍四种编译基础方式，这四种方式在开发中因为有些繁琐所以并不适用，在此总结列出只是为了帮助更加深入了解less；

代码示例：

<!--html代码块-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用koala</title>
     <link rel="stylesheet" href="../css/Less02.css">
</head>
<body>
<div id="d1">
    中华人民共和国1
</div>
<div id="d2">
    中华人民共和国2
</div>
</body>

/*Less02.less代码；冒号后边的是默认值*/
.border_radius(@size: 10px,@width: 200px,@height: 200px,@bgColor: green){
  border-radius: @size;
  width: @width;
  height:@height;
  background-color: @bgColor;
}
#d1{
  .border_radius(20px);
}
#d2{
  .border_radius();
}

方式一：使用软件koala

在这里插入图片描述

Less02.less未编译时的显示效果:
在这里插入图片描述 步骤：
1：开启koala

2：选中Less02.less文件后点击compile（勾选auto compile），显示success，随后这个less文件就被编译成css文件，之后再运行HTML文件：

注意：
1：在勾选auto compile之后koala会自动检测less文件的改动并且进行实时的编译，但是这种监测还是太慢，less文件的变化无法及时的监控到；
2：使用koala的好处是有错误提示，所以比较方便获取错误信息；
3：使用koala软件默认是将less文件编译到同级目录下，如果想要改变可以在下图位置上进行单个文件的改变；缺点是不能实现批量的改变。
在这里插入图片描述
3：koala在服务端并不适用，所以一般不建议使用。
4：在HTML文件中的引用：（link引入的是编译后的css文件，要注意路径）

<link rel="stylesheet" href="../css/Less02.css">

方式2：通过命令行进行编译

注意此种方法使用起来比较复杂但是是直接使用命令行进行操作所以他的效率相对较高；而且，逼格也极高 -_-
在这里就不再分博客说明node.js的安装，直接在这进行安装
1：安装node.js
在这里插入图片描述

从上图可以看出下载的NodeJS自带npm，npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题；
2：使用命令行查看版本（-v）检测是否安装成功

3：使用命令行编译less文件还需要使用npm下载插件（【less】注意一定要全局部署 -g）
在这里插入图片描述
4：使用命令行进入less文件所在目录

5：进入less文件所在目录后进行命令行编译（lessc和Javac一样都是编译的意思）
1）：将less文件编译到同级目录下

2）：指定编译后形成的css文件的位置（为less同级目录css中的less文件夹）
在这里插入图片描述
分析：
使用命令行的操作，固然效率是非常高的，但是他的操作是复杂的，less文件每改动一次就必须要编译一次，那有没有类似koala软件的监控方式吗？
那肯定是有的，需要使用插件 watcher-lessc：
6：单文件自动监测编译：
1）：安装 watcher-lessc（注意一定要使用全局 -g）
在这里插入图片描述
2）：使用新下载的组件进行编译，
（1）watcher-lessc ：表示编译的同时也添加实时监控（watcher）；
（2）-i ：表示输入文件，即要编译的less文件；
（3）-o ：表示输出文件，即编译出来的css文件；
（4）path ：在-o后跟的路径是编译出来的css文件；
在这里插入图片描述
当改变less02.less文件中的内容时在dos窗口中会出现下图中的变化，同时编译形成的css文件也会产生相应的变化，这一切都是自动进行的，所以被称为自动监测编译；（终止操作是 ctrl+c）

注意：在less中似乎没发现自动编译并且检测整个文件夹的less文件的插件。。。。（欢迎指正）

7：将编译后的css文件形成一个***.min.css文件（下图两种方法都可以）
在这里插入图片描述
8：在HTML文件中的引入方式为：（这里因为修改了编译路径所以和koala的不一样）

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

方式3：使用开发工具自动编译

注意：在实验这一个方式之前要确保把koala关闭，并且关闭了node.js的自动监测更新；
1：打开设置窗口
打开File Watchers，添加less
在这里插入图片描述
2：设置Program项（有的会自动显示，但是我的没有自动显示，）
【使用Everything软件可以快速的搜索到lessc.cmd的所在路径】

C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd

3：设置Arguments项（参数项，可以设置编译后css文件所在的位置）
需要改的就是中间的路径，放在css文件下边的less中；

$FileName$ $FileParentDir$\css\less\$FileNameWithoutExtension$.css

这个方法可以实时监测less文件的变化，并将改动的或者新生成的less文件编译到指定路径下。
4：在HTML文件中的引入方式为：:

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

方式4:引入less.js文件

使用cdn加速服务引入less.js文件,这样就可以不需要编译，直接运行；

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

<link rel="stylesheet" href="../less/less06.less" type="text/less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

注意：
1：link引入的是less文件，路径直接是less所在位置即可；
2：一定要注明type类型，因为默认为css；
3：位置顺序：link一定要在script上边。

总结

1：此篇中总结了编译less文件中的四种方法，但因为较为繁琐所以开发中是不会使用的，这里仅为学习总结；
2：要注意HTML文件在调用这四个方法时引入文件的不同；
3：在使用node.js进行命令行操作需要多加练习

最后的话：
如果在梦中经常梦到她，那说明她正在慢慢的遗忘你；回忆越来越模糊，我们都在相互忘记；

F-ZERO-F

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
编译less的四种方式以及node.js的安装

背景：众所周知css只是一门描述性语言，语言内部没有编程思想，而且他的写法也相对有些笨重，所以就会造成css代码中有大量的低逻辑的代码，非常不利于维护和扩展造成复用性太差。CSS预处理器随之产生：CSS预处理器用一种专门的编程语言，进行样式设计，然后再编译成CSS文件，以供使用；目前使用普遍的css预处理器的编程语言有less sass等；（这些语言有了编程思想，有了逻辑就会提升复用性和可维护性...
复制链接

扫一扫