Less的使用

最新推荐文章于 2023-05-17 11:28:38 发布

_zxc

最新推荐文章于 2023-05-17 11:28:38 发布

阅读量507

点赞数

分类专栏：移动端文章标签： less

本文链接：https://blog.youkuaiyun.com/qq_28846087/article/details/79421907

版权

移动端专栏收录该内容

2 篇文章

订阅专栏

LESS

css预编译语言less，真实项目中使用预编译语言开发，有很大的作用：
1、可以把无编程思想的css，转换为面向对象编程的语言（OOP），类似于JS等编程语言
2、我们可以把一些公用的样式进行提取封装（组件化、模块化等），提高开发的效率，方便后期维护
3、在less中存在作用域和变量的概念，我们可以有效的管理一些公用的值
4、存在递归或者判断等操作，可以让我们的业务代码简洁而不简单
…

less叫做预编译语言，为啥叫做预编译语言？

我们编写的less代码不能直接的被浏览器渲染（浏览器不认）
需要我们把写好的less代码编译成为正常的css后，由浏览器渲染css才可以

如何把less编译为css？

1、开发环境（项目开发时候）

需求：最好能够我们这边写less代码，有一套机制帮我们把less编译为css，这样直接就可以通过刷新页面看到最新的效果了（不要写一点，自己手动编译一点来处理）

less-2.5.3.min.js 就是能够帮助我们自动把less转换为css的插件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移动端开发</title>
    <!--
      注意点：
        1、link的rel不是stylesheet,而是stylesheet/less（写错不会起到任何的作用）
        2、我们最好把引入的JS插件放在head中，当结构渲染之前就把less编译为css，渲染结构的过程中，直接的呈现出样式
    -->
    <link rel="stylesheet/less" href="1.less">
    <script src="less-2.5.3.min.js"></script>
</head>
<body>
<div class="box"></div>
</body>
</html>

2、生产环境（项目部署上线了）

需求：类似于开发环境这种编译方式，不适合生产环境（我们不能让用户每一次访问页面，都首先重新编译css，这样太消耗性能）；生产环境需要，项目部署上线之前，我们把less编译为css，项目上线后使用的都是已经编译好的css；

如果我们用的是webpack等自动化部署工具，可以基于里面安装的less-loder等加载器完成

我们也可以基于node，把less编译为css：
1、在全局环境中安装less模块
npm install less -g

2、安装成功后会产生lessc命令，我们基于这个命令就可以编译less文件了
lessc xxx/xxx.less xxx/xxx.css -x （-x：编译并且压缩）