LESS学习和使用

我们都知道HTML和CSS不是编程语言，而是标记语言，所以很难像JS那样定义变量、编写方法、实现模块化开发等。 在目前的CSS编写模式中，我们定义了一些常用的样式类名，哪一块HTML需要这个样式，并添加相应的样式类名，所以我们经常会看到一个标签上有很多样式类名，在这种模式下我们必须时刻注意CSS的优先级，避免重叠的样式覆盖。

为了解决CSS的这个困境，CSS预处理和预编译的思想脱颖而出，比较有代表性的有less、sass和stylus。 他们在传统的CSS中增加了大量的新的语法、写作方法、常用函数等，可以使我们的CSS成为像JS一样的编程语言。 本文重点介绍 less 的语法和用法。

写出的少**不能直接在浏览器中运行，需要编译成普通的css**，所以先来学习习常见的少编译方法。

Less 仅适用于现代浏览器（最新版本的 Chrome、Firefox、Safari 和 IE）。 我们不建议在生产中使用 LESS 客户端，因为用户在将 LESS 编译为 CSS 时会看到加载延迟，即使浏览器中的加载延迟不到一秒。

让我们首先介绍我们设置样式的 less 文件注意：rel='stylesheet/less'

// index.HTML 文件 Hello World！

// styles.减少文件@blue：5b83ad;@size:50px;header

npm install -g lite-serverlite-server //to run

将 less 模块安装到全局节点环境中。

npm install less -g

->看跌期权样式更少的文件编译成样式CSS 文件（如果您没有此 CSS 文件，您将自行创建） LESSC 样式less styles.CSS ->编译的CSS文件是压缩的Lessc Stylesless styles.min.css -x 或 --compress

// styles.更少文件（预编译） @blue： 5b83ad;@size:50px;header

// styles.CSS 文件（编译后）标头

-> 定义编译文件目录和目标导出目录 var dirpath ="./less/", tarpath = "./css/";->导入导入节点中需要用到的模块 var fs = require（）"fs"), less = require("less");->读取 dirpath 中的所有文件，检查文件类型，只检查我们存储的文件更少 var ary = files = fsreaddirsync(dirpath); files.foreach（function （file， index） ） ） ->编译目录下的所有文件，并将编译后的结果保存在指定目录下 aryforeach(function (file) ,function (error, output) )

与 JS 中的变量一样，较少的变量定义使用 @ 而不是 var

//->less **link-color: #428bca; @link-color-hover: darken(@link-color, 10%);a } ->编译成css的结果 a a：hover

//->less **#000; background: url("@/test.png"); selector: box; @bgimg: "../img"; @property: color;

->less **public n** ul ->编译为 css 的结果public n** ul

->less **public（） n** ul ->编译为 css n** ul 的结果

->less **public n** ul ->编译为 css 的结果public, n** ul n** ul

//->less **#header .logo }

->编译为 css header header 的结果n**igation #header .logo #header .logo:hover

可以涉及任何数字、颜色或变量。 让我们看一组示例：

@base: 5%;@filler: @base * 2;@other: @base + filler;color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + filler;

lighten(@color, 10%);// return a color which is 10% *lighter* than @colordarken(@color, 10%);// return a color which is 10% *darker* than @color

round(1.67); // returns `2`ceil(2.4); // returns `3`floor(2.6); // returns `2`

@var: red;#page }#footer