less是预编译css语言，是css的超集。此文只是个人的一些总结归纳，仅供参考。如果想深入了解可以细看官网。
目录
1、注释
2、变量
3、嵌套
4、继承
5、函数（mixin）
1、注释
.less后缀的文件并不能直接在浏览器上识别，所以需要借助第三方工具编译，我用的是koala。
//单行注释， 不会附加在编译后的文件上
/* 多行注释 会附加在编译后的文件上 */
2、变量
// 定义less变量使用的是@符号，稍微注意下
// 定义sass变量使用的是$符号，稍微注意下
//1.变量名可以由字母、数字、_和-组成
//2.less变量可以使用类似@tagName: section;注意在用于选择器部件或者是字符串拼接的时候，必须使用使用@{tagName}才会生效，作为属性的时候可以直接@tagName
//3.less在使用变量的时候有作用域的，优先选择最靠近的less变量使用。存在使用less变量的过程中会有懒加载的情况。
@color: blue;
@font-size: 20px;
h1 {
color: @color;
font-size: @font-size;
}
@tagName: section;
@height: height;
@{tagName} {
@{height}: 100%;
}
@changedColor: green;
div {
ul {
li{
color: @changedColor;
// 那么此时就是这个最靠近了，less找的就会是这个变量对应的颜色值
@changedColor: pink;
}
// 虽然你放在了下面，less会发挥懒加载机制，优先找最靠近的变量
@changedColor: #f00;
}
}
3、嵌套
//可以直接嵌套区分上下层级关系，也可以利用父选择器引用，采用&可以引用完整的父选择器
@pink: pink;
@black: black;
.container {
padding: 20px;
background-color: @pink;
> div {
width: 100px;
}
.aside {
width: 200px;
}
button {
margin: 10px;
color: @pink;
}
div {
padding: 15px 10px;
color: @black;
// 在这个div的后面加多一个after伪类，并添加以下内容
&:after {
display: block;
content: '英文名是jam!';
color: #909090;
font-weight: bold;
font-size: 50px;
font-family: "Microsoft YaHei";
border: 1px solid @pink;
}
&-msg{
color: blue;
}
& > & {
font-size: 50px;
}
}
}
4、继承
//单继承与多继承
.baseClass {
color: #f00;
}
.baseClass2 {
font-weight: 500;
}
//方式一，多重继承的，用逗号隔开就行了
.myClass:extend(.baseClass, .baseClass2) {
// .myClass类拥有的属性
background-color: yellow;
color: green;
}
//方式二，多重继承的，用逗号隔开就行了
.myClass2 {
// &代表当前.myClass2这个类
&:extend(.baseClass, .baseClass2);
// .myClass2类拥有的属性
font-size: 50px;
}
//less不支持继承泛型的子类
*.button {
font-size: 12px;
}
//less要继承就继承泛型，比如*.button，不支持继承div.button，特别注意下
.myClass {
// &:extend(div.button); // 这样写是会有问题的，继承不过来
&:extend(*.button);
}
//less不支持多匹配相似度继承
[name=xx] {
border: 1px solid red;
}
[name="xx"] {
border: 1px solid green;
}
[name='xx'] {
border: 1px solid blue;
}
.myClass {
&:extend([name="xx"]); // 这样写不太好，它会把每个相似的都继承过来，稍微注意下
}
//在实现less深度继承的时候外层结构顶级随意，里层对应的.className必须保持一致，深度继承语法为.myClass{&:extend(.className)};，当如果不写all参数的时候只会继承最顶层的样式，如果写成.myClass{&:extend(.className all)};则把子类也一起继承过来了
.base {
color: #f00;
.base2 {
font-size: 20px;
}
}
.myClass {
// &:extend(.base);
&:extend(.base all);
text-decoration: line-through;
}
//媒体查询与继承：
//1.在相同的的媒体查询范围内嵌套和继承都是没问题的
//2.在媒体查询外部的css代码的类或标签的选择器是可以继承媒体查询内部的，而且继承的时候是可以继承所有匹配相同的选择器的
@media screen {
h1 {
font-size: 50px;
}
@media (min-width: 500px) {
h2 {
color: #f00;
}
@media (max-width: 1500px) {
h1 {
font-family: "SimSun";
}
strong {
font-weight: normal;
font-style: normal;
}
.myClass {
// 只能继承媒体查询内部同级标签，比如strong
&:extend(strong);
// 继承不了不是媒体查询内部同级标签h1，h2
// &:extend(strong, h2, h1);
}
}
}
}
//在媒体查询外部的css代码的类或标签的选择器是可以继承媒体查询内部的，而且继承的时候是可以继承所有匹配相同的选择器的
.testClass:extend(h1) {
background-color: blue;
}
5、函数
//less本身自带有很多内置函数，我就不一一介绍，有兴趣的可以看看官网的API，在这里我主要想说一下mixin
//如果mixin函数传入的形势参数都设置了默认值，那么我们在调用less函数的时候直接调用就行了，可以不用传入任何参数。如果less函数传了第一个参数，第二个没有传，可以指定形参名称绕过第一个参数来
//参数后面加...，表示在调用less函数的时候可以传入无数个实际参数
@color: #000;
@font-size: 80px;
.myClass (@color, @font-size...) {
color: @color;
font-size: @font-size;
}
// 调用less函数，注意调用的时候一定要在某个选择器里面去调用less函数
h1 {
.myClass (@font-size: @font-size, 1, 2, 3);
}
//mixin内置两个特殊的对象 @arguments 和 @reset 。@arguments代表mixin的所有入参,而@reset代表mixin的...入参数组。
.xx-border (...) {
border: @arguments;
}
.xx-test(@type;@rest...){
height: @type * 12px;
border: @rest;
}
.myClass {
.xx-border (100px, solid, pink);
.xx-test(2;1px;solid;red);
}
//mixin函数的形势参数可以使用逗号和分号隔开，个人习惯问题，无所谓！
.xx-test (@width: 1px, @type, @color: red) {
border: @arguments;
}
.myClass {
.xx-test (@type: solid);
}
//mixin的重载可定义多个同名mixin，调用时只要参数数量匹配则会执行相应的mixin。
.base (@font-size) {
font-size: @font-size;
}
.base (@font-weight, @color) {
font-weight: @font-weight;
color: @color;
}
.base (@border...) {
border: @arguments;
}
.test-Class {
.base(20px);
.base(bold, black);
.base (1px, solid, red);
}
//mixin支持标签参数的模式匹配
.common (aaa; @type; @color) {
border: 1px @type; @color;
}
.common (bbb; @type; @color) {
border: 1px solid blue;
}
.common (@type; @color) {
border: 1px @type; @color;
}
.myClass {
.common (aaa, solid, red);
.common (bbb, solid, blue);
.common (solid, green);
.common (bbb, solid); //这里虽然使用了标签，但参数不够，会把标签当成是一个值
}
//less函数命名空间
.nameSpace {
.package {
.a () {
a: a;
}
.b () {
b: b;
}
}
}
.myClass {
.nameSpace.package.a();
.nameSpace.package.b();
}
//作为结构体内部的变量是不会被外部访问到的，先拆包，调用就有反应
//规则体变量访问不到会报错 start
@color: blue;
@struct : {
font-size: 20px;
@color: #f00;
& > .book {
margin: 10px;
}
.name () {
border: 1px solid red;
color: @color;
}
};
.myClass {
//如果使用了规则体，内部的子函数只能够通过拆包的方式拿到，不能使用命名空间的方式去拿
//使用的@color是距离less子函数就接近的那个颜色值
@struct();
.name();
@color: green; // 作为结构体内部的变量是不会被外部访问到的
}
// = ---> javascript的==，不是赋值，逗号表示或的意思
//default函数用于条件控制当中，充当else或switch语句中default的角色。
//.func (@size) when (@size > 20pt) and (@size < 40pt) , (true) {
.func (@size) when (@size > 20pt) and (@size < 40pt) {
.red when (@size = 30pt) {
font-size: @size;
color: #f00;
}
.blue {
font-size: @size;
color: blue;
}
}
//加了when (default())之后这个函数需要前者条件不符合的情况下才会执行
.func (@size) when (default()) {
.yellow {
font-size: @size;
}
}
.selector {
.func (35pt);
}
//mixin函数的递归不能够对选择器做递归循环，只有使用到了的变量才会发生变化，执行循环多次
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.generate-columns(4);