sublime中如何用less实现css预编译

Posted 大前端之路

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sublime中如何用less实现css预编译相关的知识,希望对你有一定的参考价值。

实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

1、安装less插件

ctrl+shift+p ->  install package  -> less  即可安装

功能:LESS高亮插件

简介:用LESS的同学都知道,sublime没有支持less的语法高亮,所以这个插件可以帮上我们

使用:打开.less文件或者设置为less格式

2、安装less2css插件

ctrl+shift+p ->  install package  -> less2css  即可安装

less2css插件安装好后需要修改系统的环境变量,将less.js-window下载到本地后,将其目录位置添加到系统环境变量中

功能:

当保存less文件的时候自动生成同名的css文件;
当保存less文件的时候提示编译错误信息;
批量编译项目目录下的所有less文件为css文件。

具体功能设置可以修改该插件的setting-user参数,记住是先将setting-default里的参数复制到setting-user中在修改

使用:

ctrl+s即可将编写的less文件自动编译为css文件。

工具再强大,也得精通其语法才行啊。

语法教程参见LESS

 

以上是关于sublime中如何用less实现css预编译的主要内容,如果未能解决你的问题,请参考以下文章

CSS预编译语言Less的用法总结

CSS预编译语言Less的用法总结

sublime 安装less插件

5分钟学会使用Less预编译器

Sublime Text3 支持Less

如何将scss预编译为webpack中的单个css文件?