小米官网css转成less

html-css014

小米官网css转成less,第1张

应用程序中转换。LESS是一种动态样式表语言，扩展了CSS的功能，Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性。在小米官网中，在应用程序中完成css转less，使CSS更易维护和扩展。

两种方式，分别为：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文件将自动生成。

如：在D盘建立一个SASS文件夹，文件夹下有一个style.scss文件（scss，sass都行。sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。scss对代码的要求没那么高。）用下面的方法可以将sass或者scss转换为css文件。

首先输出 D: 代表找到D盘 ；

然后输出cd sass 代表找到sass文件夹，其中cd是一定要的；

最后输出 sass>sass --watch style.scss:style.css 在sass文件夹下将style.scss转换为style.css 。sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css 。