Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。 更少可以运行在Node或浏览器端。 例子： 复制代码 @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } 复制代码 输出： 复制代码 .box { color: #fe33ac; border-color: #fdcdea; } .box div { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } 复制代码 使用方法 安装 在服务器上安装Less的最简单方法是通过npm，node.js包管理器，如下所示： $ npm install -g less 命令行用法 安装后，您可以从命令行调用编译器，如下所示： $ lessc styles.less 这将输出编译的CSS stdout。要将CSS结果保存到您选择的文件，请使用： $ lessc styles.less styles.css 要输出缩小，您可以使用CSS clean-css插件。安装插件后，使用--clean-css选项指定缩小的CSS输出： $ lessc --clean-css styles.less styles.min.css 要查看所有lessc不带参数的命令行选项，请参阅用法。 代码用法 您可以从节点调用编译器，如下所示： var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, output) { console.log(output.css); }); 哪个会输出 .class { width: 2; } 配置 您可以将一些选项传递给编译器： 复制代码 var less = require('less'); less.render('.class { width: (1 + 1) }', { paths: ['.', './lib'], // Specify search paths for @import directives filename: 'style.less', // Specify a filename, for better error messages compress: true // Minify CSS output }, function (e, output) { console.log(output.css); }); 复制代码 有关更多信息，请参阅用法 浏览器端用法 在浏览器中使用less.js非常适合开发，但不建议用于生产 客户端是最简单的入门方式，适合用Less开发，但在生产中，当性能和可靠性很重要时，我们建议使用node.js或许多第三方工具之一进行预编译。 首先，将.less样式表链接到rel设置为“ stylesheet/less” 的属性： 接下来，下载less.js并将其包含在页面元素的标记中： 提示 确保在脚本之前包含样式表。 当您链接多个.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，混合或名称空间都无法访问。 由于浏览器加载外部资源的原始策略相同，因此需要启用CORS 选项 通过在以下位置之前在全局less对象上设置选项来定义选项： 复制代码 复制代码 或者为了简洁起见，可以将它们设置为脚本和链接标记上的属性（需要JSON.parse浏览器支持或polyfill）。 复制代码 复制代码 下载 下载Less.js v2.5.3 下载源代码 通过直接从GitHub下载获取最新的Less.js源代码。 通过GitHub克隆或分叉 分叉项目并向我们发送拉取请求！ 用Bower安装 通过在命令行中运行以下命令来安装Less.js项目和JavaScript： bower install less CDN less 的语法： 1嵌套语法 复制代码 嵌套规则 Less使您能够使用嵌套代替或与级联结合使用。假设我们有以下CSS： #header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } 在Less中，我们也可以这样写： #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } } 生成的代码更简洁，并模仿HTML的结构。 您还可以使用此方法将伪选择器与mixin捆绑在一起。这是经典的clearfix hack，重写为mixin（&代表当前的选择器父级）： .clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } } 复制代码 2 注释语法; 使用 // 或 /* 包裹注释*/ // 打包后将看不到，包裹注释，打包后依然可以看到 3变量语法： 复制代码 //这些都是不言自明的： @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } //输出： #header { color: #6c94be; } 复制代码 4 作用域语法： 复制代码 Less中的Scope与编程语言非常相似。首先在本地查找变量和mixin，如果找不到它们，编译器将查找父作用域，依此类推。 @var: red; #page { @var: white; #header { color: @var; // white } } 变量和mixin在使用之前不必声明，因此以下Less代码与前面的示例相同： @var: red; #page { #header { color: @var; // white } @var: white; } 复制代码 5 混合语法 复制代码 混合 Mixins是一种将一组属性从一个规则集包含（“混入”）到另一个规则集中的方法。所以说我们有以下课程： .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } 我们希望在其他规则集中使用这些属性。好吧，我们只需要删除我们想要属性的类的名称，如下所示： #menu a { color: #111; .bordered; } .post a { color: red; .bordered; } .bordered该类的属性现在将出现在#menu a和.post a。（请注意，您也可以#ids用作mixins。） 复制代码 复制代码 另外 Mixins也可以接受参数，这些参数是混合在一起时传递给选择器块的变量。 例如： .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } 以下是我们如何将其混合到各种规则集中： #header { .border-radius(4px); } .button { .border-radius(6px); } 参数mixin也可以为其参数设置默认值： .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } 我们现在可以像这样调用它： #header { .border-radius; } 它将包括5px边界半径。 您还可以使用不带参数的参数化mixins。如果要从CSS输出中隐藏规则集，但希望在其他规则集中包含其属性，这非常有用： .wrap() { text-wrap: wrap; white-space: -moz-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } pre { .wrap } 哪个输出： pre { text-wrap: wrap; white-space: -moz-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } 具有多个参数的混合 参数可以是分号或逗号分隔。建议使用分号。符号逗号具有双重含义：它可以解释为mixin参数分隔符或css列表分隔符。 使用逗号作为mixin分隔符使得无法将逗号分隔列表创建为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，则它假定参数由分号分隔，并且所有逗号都属于css列表： 两个参数，每一个包含逗号分隔的列表：.name(1, 2, 3; something, else)， 三个参数，每个包含一个数字：.name(1, 2, 3)， 使用dummy分号创建mixin调用，其中一个参数包含逗号分隔的css list : .name(1, 2, 3;), 逗号分隔的默认值：.name(@param1: red, blue;)。 定义具有相同名称和参数数量的多个mixin是合法的。Less将使用所有可应用的属性。如果您使用带有一个参数的mixin .mixin(green);，那么将使用具有一个强制参数的所有mixin的属性： .mixin(@color) { color-1: @color; } .mixin(@color; @padding: 2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector div { .mixin(#008000); } 编译成： .some .selector div { color-1: #008000; color-2: #008000; padding-2: 2; } 命名参数 mixin参考可以通过其名称而不仅仅是位置来提供参数值。任何参数都可以通过其名称引用，并且它们不必具有任何特殊顺序： .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } 编译成： .class1 { color: #33acfe; margin: 20px; padding: 20px; } .class2 { color: #efca44; margin: 10px; padding: 40px; } 复制代码 5 混合作为函数引入 复制代码 Mixins作为函数 从mixin返回变量或mixins mixin中定义的变量和mixin是可见的，可以在调用者的范围内使用。只有一个例外，如果调用者包含一个具有相同名称的变量（包括由另一个mixin调用定义的变量），则不会复制变量。只有受调用者本地范围中存在的变量才受到保护。从父作用域继承的变量将被重写。 例： .mixin() { @width: 100%; @height: 200px; } .caller { .mixin(); width: @width; height: @height; } 结果是： .caller { width: 100%; height: 200px; } 因此，mixin中定义的变量可以作为其返回值。这允许我们创建一个几乎可以像函数一样使用的mixin。 例： .average(@x, @y) { @average: ((@x + @y) / 2); } div { .average(16px, 50px); // "call" the mixin padding: @average; // use its "return" value } 结果是： div { padding: 33px; } 直接在调用者范围中定义的变量不能被覆盖。但是，调用者父作用域中定义的变量不受保护，将被覆盖： .mixin() { @size: in-mixin; @definedOnlyInMixin: in-mixin; } .class { margin: @size @definedOnlyInMixin; .mixin(); } @size: globaly-defined-value; // callers parent scope - no protection 结果是： .class { margin: in-mixin in-mixin; } 最后，mixin中定义的mixin也作为返回值： .unlock(@value) { // outer mixin .doSomething() { // nested mixin declaration: @value; } } #namespace { .unlock(5); // unlock doSomething mixin .doSomething(); //nested mixin was copied here and is usable } 结果是： #namespace { declaration: 5; } 复制代码 导入（Importing） 复制代码 “导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉： @import "library"; // library.less @import "typo.css"; 复制代码 除此之外，还可以学习其他的样式语音 :sass、scss Stay Hungary Stay Foolish 分类: 2.0.前端进阶,2.4.前端工程化Webpack,webpack,Web前端https://www.cnblogs.com/Anderson-An/p/10008070.html