将less文件转换成css文件

html-css012

将less文件转换成css文件,第1张

两种方式,分别为:1、手动生成;2、使用webstorm自动生成。 1、项目的文件结构 2、在less文件的根目录 Shift + 鼠标右键 + 选择‘在此处打开命令窗口’ 3、输入命令:lessc + 空格 + less文件名 如:lessc main.less 4、继续输入命令:lessc + 空格 + less文件名 + 空格 + 大于号 + 空格 + css文件名 如:lessc main.less >main.css1、File + Settings 2、Tools + File Watchers 3、点击‘确定’即可 4、当你修改less文件时,css文件将自动生成。

在浏览器中使用less.js开发是很好的,但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中,尤其是对性能要求比较高的场合,建议使用node或者其它第三方工具先编译成CSS再上线使用。

注意:

确保包涵.less样式表在less.js脚本之前

当你引入多个.less样式表时,它们都是独立编译的。所以,在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。

必须通过服务器环境访问页面,否则报错

浏览器选项:

你可以引入<script

src="less.js"></script>之前通过创建一个全局less对象的方式来指定参数!

通俗的来讲,Less 是一个Css

预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions)

和许多其他的技术,从而可以让Css更具维护性,主题性,扩展性。本文为Less入门与语法梳理教程。其中包括了一些入门级例子,适合于对Less有入门级了解的开发者查阅。