[TOC] ## 前言 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。 ## 使用入手 ### 文件使用 * 下载less.min.js 通过浏览器实时编译less文件 ~~~ <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script> //设置opt less = { env: "development" }; less.watch();//代码监测 </script> <script src="less.min.js"></script> ~~~ * npm安装less模块，编译less文件使用 ~~~ npm i less --save-dev $ lessc bootstrap.less bootstrap.css lessc --help lessc -h ~~~ * 使用gulp-less模块，编译less文件使用 * 其他ide的支持 * css的插件，只列举两个，其他不常用 `npm install less-plugin-clean-css` > Autoprefixer 自动加浏览器前缀 > clean-css 压缩样式 * 其他框架使用情况：bootstrap，ionic * gui工具：koala ，见zjfe软件 * ide中包含插件的有：eclipse,sublime,vs,notepad,hb,ws * 第三方编译，gulp-less 推荐使用 ## 语法 ### less文件 * 基本语法 @import variable.less; //后缀名为less可以省略文件后缀名 * The following import directives have been implemented: > reference: use a Less file but do not output it > inline: include the source file in the output but do not process it > less: treat the file as a Less file, no matter what the file extension > css: treat the file as a CSS file, no matter what the file extension > once: only include the file once (this is default behavior) > multiple: include the file multiple times > optional: continue compiling when file is not found * 具体的解释以及参数的结果可以查阅官网，我们一般都是使用less文件 ### less变量 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 需要注意的是变量是全局变量还是页面变量，区别引用位置. * 基本使用，最常见的作为样式属性值本身。 ~~~ @color: #4D926F; #header { color: @color;} ~~~ * 变量支持直接变量也支持变量、字符串、简单的运算等 ~~~ @light-blue: @nice-blue + #111; @cont:“是一个前端”； @width:2-1px+8mm; //结果是9px @link-color: #428bca; // sea blue @link-color-hover: darken(@link-color, 10%); ~~~ * 变量支持作为选择器 ~~~ // Variables @my-selector: banner; // Usage .@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto; } ~~~ * 变量支持作为url,比如图片，样式等相关前端资源的路径 ~~~ // Variables @images: "../img"; // Usage body { color: #444; background: url("@{images}/white-sand.png"); } ~~~ * 变量支持作为属性名称 ~~~ @property: color; .widget { @{property}: #0ee; background-@{property}: #999; } ~~~ * 懒加载机制 该原理允许样式使用后面定义的变量，而不用考虑先后顺序 ~~~ .lazy-eval-scope { width: @var; @a: 9%; } @var: @a; @a: 100%; ~~~ * 不支持默认值 因为变量很容易被之后的变量覆盖更改值。 ### 拓展、继承 * 基本使用 混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。(默认只能继承单类的，如果想下属所有样式都继承，需要加all参数） ~~~ .inline { display:inline； span{ color:red; } } //不括子选择器样式 nav span:extend(.inline){ } //包括子选择器继承 nav span:extend(.inline all){ } ~~~ * 支持继承多个，支持选择器继承 ~~~ //后代选择器继承 nav span:extend(.inline span){ } //多继承 nav span:extend(.inline)：extend(.color){} ~~~ * 支持标签内写法 ~~~ nav span{ &:extend(.inline); } ~~~ * 其他说明 > 1.不支持不确切的选择器，比如*.class > 2.不支持包含其他条件的选择器 ，比如.c.class.v > 3.不支持nth-child 的选择器 > 4.媒体查询中使用，定义在顶部的以及另一个媒体查询段的样式组不可用的。 > 5.使用选择器组定义的样式是无效的，.a,.b{} > 6.可以代替函数做代码缩减，函数调用会不断的重复，而拓展继承则会吧继承的放在一起声明。（非常重要） ### 混合 * 基本使用，把式组合起来，用mix-in ~~~ .a, #b { color: red; } .mixin-class { .a(); } .mixin-id { #b(); } ~~~ * 自定义样式把样式组合 ~~~ .my-mixin { color: black; } .my-other-mixin() { background: white; } .class { .my-mixin; .my-other-mixin; } ~~~ * 支持命名空间，也就是符合选择器的样式,其中()是可选的。 ~~~ .a { .inner{} } .class { .a .inner; } .class2 { .a .inner(); } ~~~ * 把当前选择器包括进去，包含样式 ~~~ .my-hover-mixin() { &:hover { border: 1px solid red; } } button { .my-hover-mixin(); } ~~~ * 带参数的混合 ，支持参数默认值 ~~~ .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } ~~~ * 带多个参数的混合 ，支持参数默认值，其中使用时依次复合，要求必须传入参的是不会被混合的 ~~~ .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); } //compile into .some .selector div { color-1: #008000; color-2: #008000; padding-2: 2; } ~~~ * 形参规则，针对都有默认指的形参，可以根据实际情况自己去解析。可以传入变量或者不传（按照顺序） ~~~ .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } ~~~ * 形参规则，针对都有默认指的形参，可以根据实际情况自己去解析。可以传入变量或者不传（按照顺序） ~~~ .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } ~~~ * 作为变量组或者运用变量运算结果 ~~~ //变量组 可以理解为有作用域的变量 .vars1() { @width:100px; @height:50px; } .class1 { .vars1(); width: @width; height: @height; } //变量运算 .vars2(@x,@y) { @aver:(@x+@y)/2; } .class2 { .vars2(@x,@y); width:@aver; } ~~~ * 其他，补充说明其他特性，因为使用并不是很多只作为了解即可 1. 感觉参数很多，比较麻烦，可以用@arguments来代表所有参数 2. 可以用`...`来代表后面有很多参数可传 3. 可以使用逻辑判断来限制样式使用条件，`.truth (@a) when (@a = true) { ... }` 4. 特殊的检查语法， iscolor isnumber isstring iskeyword isurl ispixel ispercentage isem isunit 5. 符合条件以及不符合条件的默认情形 ~~~ .mixin (@a) when (@a > 0) { ... } // matches only if first mixin does not, i.e. when @a <= 0 .mixin (@a) when (default()) { ... } ~~~ ### merge 归并 * 该条允许你把一些样式值归并到已经有的样式值中,以`，` 分隔 ~~~ .mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin(); box-shadow+: 0 0 20px black; } //compile into .myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black; } ~~~ * 该条允许你把一些样式值归并到已经有的样式值中,以空格分隔 ~~~ .mixin() { transform+_: scale(2); } .myclass { .mixin(); transform+_: rotate(15deg); } //compile into .myclass { transform: scale(2) rotate(15deg); } ~~~ ### 嵌套结构 * 嵌套（有dom层级结构的嵌套） 我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰，于一个模块最好。 ~~~ #header { h1 { font-size: 26px; font-weight: bold; } } ~~~ * &代表当前标签，允许你在当前结构下不重复写当前选择器名称 ~~~ #header { &{ color: blue; } &-link{ cursor: pointer; } &：h1 { font-size: 26px; font-weight: bold; } } ~~~ * 其他语法 1. 允许改变选择器的结构，可以在当前样式下追加前面的结构 2. 组合前面任意的群组选择器，而不用重复指代名称 ~~~ p, a, ul, li { border-top: 2px dotted #366; & + & { border-top: 0; } } ~~~ ### 函数手册（非重点学习内容） * 杂项函数 * 字符串函数 * 列表函数 * 数学函数 * 类型函数 * 颜色定义函数 * 颜色通道函数 * 颜色操作函数 * 颜色混合函数 ### 其他 详细学习文档参考官网：[less中文网](http://lesscss.cn/features/)