Sublime Less 自动编译成css

1.note编译

1.下载notejs
https://nodejs.org/en/

2.首先你要安装lessc。我是用npm包管理器直接安装的,只需要一条命令,如下:
npm install less -g

3.检查lessc是不是安装成功了:
lessc -v

在 cmd中可以手动编译
然后可以手动编译less文件为css (f:\WorkFiles\天津欢乐谷\style\alan.less)
进入目录 :cd f:\WorkFiles\天津欢乐谷\style
lessc alan.less > alan.css  编译less为css文件

PS:
cd\ 回到盘根目录

f: 进入f盘

cd f:\WorkFiles\天津欢乐谷\style 进入目录

lessc alan.less > alan.css 编译less为css文件

cd WorkFiles 进入workFiles文档

2.submile的less2css插件

Package Control安装less2css, less(高亮)

安装Less2Css;

步骤:1.快捷键 Ctrl+Shift+P(菜单 – Tools – Command Paletter),输入 install 选中Install Package并回车,输入或选择Less2Css(注意左下角的小文字变化,会提示安装成功)。

2. https://github.com/duncansmart/less.js-windows下载该文件并解压到本地目录(eg:D:\less.js-windows-master);点击计算机 右击 属性,选择高级系统设置,编辑Path ,将解压目录,添加到PATH中。

3. 安装完以上操作,重启Sublime后,Control+s 保存Less文件,会在同目录下生成相应的.css文件。至此操作已经完成。如果想改变快捷键和生成css的格式,打开

复制Settings-Default内的内容到Settings-User中,更改其中的值,例如把minName变为True,minify变为True,会生成相应的x.min.css文件。

PS,如果编译时submile报错(unable to interpret argument clean-css-if itis a plugin(less-plugin-clean-css)

在cmd里安装 less-plugin-clean-css插件
npm install less-plugin-clean-css

3.还有一个软件是koala

Koala 特性:

多语言支持 :支持 less 、 sass 、 coffeescript 和 compass framework 。
实时编译: 监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。
编译选项: 支持自定义编译选项。
代码压缩: less

时间: 2024-10-06 08:36:26

Sublime Less 自动编译成css的相关文章

less在hbuilder自动编译成css

hbuilder 打开工具栏->预编译器设置 选择.less,点击编辑按钮 编辑命令地址(就是含有lessc.cmd的文件夹)

Hbuilder中的less不能自动编译为css怎么办

最近用hbuilder 写less文件,保存后发现无法将less文件自动编译成css文件,删掉,重装,依旧不行,每次都要在less文件上右键->编译 才能得到最新的css文件,本来就是件高效率的事,但这么一来,兴致全无. 那么有没有Hbuilder中的less不能自动编译为css的解决方案?快来跟小编一起学习吧! 方法/步骤1:less不能自动编译为css,一般只要设置预编译就可以了,第一步,打开hbuilder的工具栏,找到预编译器设置(如图所以),点击less,然后选编译(如果没图片中的选项

Sublime text 3如何编辑less并转(编译)成css文件

今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个软件还能扩展sublime的功能,何乐而不为,于是赶紧去网上查了资料并加以整理. 1.在sublime里安装好less(less语法高亮功能插件)和Less2Css(编译功能插件)这两个插件,具体步骤为: Ctrl+Shift+p打开命令面板,输入install package并在下拉里选中inst

gulp-less插件之less文件编译成css

gulp 是基于node的,所以第一步要确保你已经安装了node环境,具体怎么安装可以到node官网去看一下(https://nodejs.org/en/) 1.全局按钮gulp 打开node窗口输入npm install -g gulp 全局安装好之后  进入当前目录安装本地安装 npm install --save-dev gulp 当全局与本地项目文件夹里面都安装好了之间 使用命令行 gulp –v看一下版本 如果版本一样那就最好了 2.插件安装 npm install gulp-less

sublime将less转换成css

npm配置: npm -g install less sublime配置:a. 安装lessb. 安装less2cssc. 配置less2css:c-1. 解析:c-2. 代码: { "autoCompile": true, "createCssSourceMaps": false, "ignorePrefixedFiles": false, "lessBaseDir": "./", "lessc

WebStorm自动编译LESS产出CSS和source maps

1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选Enable JavaScript source maps   Enable CSS source maps. 2.打开WebStorm,点File-->Settings,找到File Watchers,点右侧的“+”,选择LESS,更改两项设置如下: Program: C:\Users\wind\AppData\Roaming\npm\lessc.cmd   (less的安装路

webstoem自动编译less文件

去node的主页下载对应版本的nodejs然后安装下载地址:http://nodejs.org/   根据自己的系统选择合适的版本下载. 安装完成之后打开命令提示符(win+r 输入cmd 回车),分别输入node -v以及npm -v如果返回版本号说明你安装成功了 接下来就可以安装less了,在"命令提示符"下运行命令"npm install less -g",然后npm就自动开始下载并安装LESS. 配置webstorm(版本10),点击"文件&quo

phpstorm配置File Watcher在windows下自动编译sass文件

最近刚接触sass这个css预处理器,其在windows上需要先安装Ruby运行环境.装好Ruby和sass后,发现如果要将.sass文件转成css的话,还需要在控制台中输入命令,比较麻烦. 由于我自己用的IDE是phpstorm,所以去其官网翻了下,可以用里面的File Watchers来实现自动转换.sass->.css文件. 其实当你新建一个.sass文件的时候,phpstorm也会提示是否配置File Watchers. 配置步骤 以windows环境的phpstorm 7.1.3为例:

webstorm 设置 sass自动编译问题

sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller.org/downloads/    ,安装时选择加入Path 安装完成后需测试安装有没有成功,运行CMD输入以下命令: ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32] 如上已经安装成功,Ruby