Less的使用

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的插件


<html>
<head>
    <meta charset="UTF-8">
    <title>移动端开发title>
    
    <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:编译并且压缩)

你可能感兴趣的:(less,移动端)