less是一门css预处理语言，它扩展了css语言，增加了变量，mixin，函数等特性，使css更易维护和扩展。
更少可以运行在node或浏览器端。
例子：
@ba: #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(@ba, 5%); border-color: lighten(@ba, 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，包管理器，如下所示：
$ npm install -g less
安装后，您可以从命令行调用编译器，如下所示：
$ lessc styles.less
这将输出编译的cssstdout。要将css结果保存到您选择的文件，请使用：
$ lessc styles.less styles.css
要输出缩小，您可以使用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 arch 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”的属性合肥财经大学：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来，并将其包含在页面元素的<script></script>标记中<head>：
<script src="less.js" type="text/javascript"></script>
.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，混合或名称空间都无法访问。由于浏览器加载外部资源的原始策略相同，因此需要启用cors通过在以下位置之前在全局less对象上设置选项来定义选项：<script src="less.js"></script>
<!-- t options before less.js script --><script> less = { env: "development", async: fal, fileasync: fal, poll: 1000, functions: {}, dumplinenumbers: "comments", relativeurls: 黑箱方法fal, rootpath: ":/a.com/" };</script><script src="less.js"></script>或者为了简洁起见，可以将它们设置为脚本和链接标记上的属性（需要json.par浏览器支持或polyfill）。
<script src="less.js" data-poll="1000" data-relative-urls="fal"></script><link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">下载less.js v2.5.3
通过直接从github下载获取最新的less.js源代码。
分叉项目并向我们发送拉取请求！
通过在命令行中运行以下命令来安装less.js项目和javascript：
bower install less
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
嵌套规则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; }}使用 // 或 /* 包裹注释*/
//打包后将看不到，包裹注释，打包后依然可以看到
3变量语法：
//这些都是不言自明的：@nice-blue: #5b83ad;@light-blue: @nice-blue + #111;#header { color: @light-blue;}
//输出：#header { color: #6c94be;}less中的scope与编程语言非常相似。首先在本地查找变量和mixin，如果找不到它们，编译器将查找父作用域，依此类推。@var: red;#page { @var: white; #header { color: @var; // white }}变量和mixin在使用之前不必声明，因此以下less代码与前面的示例相同：@var: red;#page { #header { color: @var; // white } @var: white;}混合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输出中隐藏规则集，但希望在其他规则集中包含其属性，这非常有用：.wra当代英雄人物事迹p() { 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, el)，三个参数，每个包含一个数字：.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 .lector div { .mixin(#008000);}编译成：.some .lector 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返回变量或mixinsmixin中定义的变量和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; // u 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 andever的用法 is usable}结果是：#namespace { declaration: 5;}“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：@import "library"; // library.less@import "typo.css";
除此之外，还可以学习其他的样式语音 :sass、scss
本文发布于:2023-04-03 02:32:15，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/716a6045c347e4264784bf1b59da204e.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：LessCSS.doc
本文 PDF 下载地址：LessCSS.pdf
| 留言与评论（共有 0 条评论） |
