LESS使用与安装

点击查看LESS学习笔记

安装

1.在D盘下新建less文件夹
2.在CMD命令提示符里写

    d:
    cd less
    npm install -g less
image.png

3.安装 Less 后,就可以在命令行上调用 Less 编译器了,如下:

lessc style.less

这将输出编译之后的 CSS 代码到 stdout,你可以将输出重定向到一个文件:

lessc style.less > style.css
image.png

若要输出压缩过的 CSS,只需添加-x 选项。如果希望获得更好的压缩效果,还可以通过--clean-css 选项启用进行压缩。

image.png


引入js

在客户端使用 Less.js 是最容易的方式,并且在开发阶段很方便,但是,在生产环境中,性能和可靠性非常重要,我们建议最好使用 node.js 或其它第三方工具进行预编译。
在<head>中写:

<link rel="stylesheet/less" href="less.less">
<script src="less.js-master/dist/less.js"></script>

提示:
务必确保在 less.js 之前加载你的样式表。
如果加载多个 .less 样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问。

样本连接:
https://pan.baidu.com/s/1c1OOj3y

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,483评论 1 32
  • 1. 新建一个文件夹,命名为 webpack-cli , webpack-cli 就是你的项目名,项目名建议使用小...
    鲁大师666阅读 1,501评论 1 3
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,227评论 7 35
  • [目录] Less为什么会出现? 学习Less的网站 Less的安装环境离线的安装方式在线的安装方式 less转化...
    顽皮的雪狐七七阅读 15,447评论 5 42
  • 2016年年初,有段时间迷茫于自己的兴趣爱好,然后列了一个清单,长长的清单,什么都想做,但是什么都想要最后的结果就...
    dream2024阅读 430评论 6 6