程序设计 初级程序员 Less

Less入门学习

2021-01-26 10:44发布

站内文章 / Sass/Less
964 0 1

目前的前端开发过程中，在实现页面样式效果中，Less和Sass这两种预处理语言非常受欢迎。

而这两种预处理语言都是css的拓展语言，他们最主要的区别是less是通过Javascript编译，而sass是通过ruby编译的。

使用less和sass都可以实现预处理，但是less在引入前端工程化后，less和sass在打包阶段都会转化成css，不会有区别，只是sass是基于ruby，所以每次npm的时候相对慢一点点。

LESS由 Alexis Sellier 于2009年设计。LESS是一个开源的。 LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript代替。

使用less的优点在官网中标示的非常清楚：

1. LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。

2. LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。

3. LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。

4. 可以通过使用LESS 变量来实现更快的维护。

但是由于模块之间的紧密耦合，我们应当采取更多的努力来重用和/或测试依赖模块。

对于他在开发过程中的使用： 

如果你的编译器是vscode，那么只需要在插件库中搜索： easy Less;安装完成后就可以直接使用less语言了；

另外建议安装格式化less代码的工具，会使得代码的结构更加清晰明了；

在我们使用less的过程中，无需创建css文件，只需要创建.less后缀的文件，那么就能生成对应的.css后缀的文件，在页面使用的时候，我们只需要引入css文件即可；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello less</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <h1>Welcome to ujiuye</h1>
    <h3>Hello!!!</h3>
</body>
</html>

是不是非常方便呢？

快去试试吧~