[TOC] https://less.bootcss.com/#%E6%B7%B7%E5%90%88mixins ## **注释** //:单行注释 /**/:多行注释 ## **导入less文件** ``` //引入其他less @import "else.less"; ``` ## **计算** 注意除法要放到小括号里或者./ ``` .box{ width:100+50px; height:5*32px; width:(100/4px);//width:100./4px; } ``` ## **层级关系(嵌套)** ```css //引入其他less @import "else.less"; .parent{ background-color:#bfa; width:200px; height:200px; /*&代表父元素*/ /*解析为.parent:hover{background-color:green}*/ &:hover{ background-color:green; } .son1{ color:red; background-color:green; } >.son2{ background-color:blue; .grandson{ color:pink; } } ~.son3{ color:black; } & .son4{ color:orange; } /*解析为:.parent .parent:hover{background-color:#00f}*/ .parent:hover{ background-color:#bfa; } } ``` 编译结果： ```css .parent{background-color:#bfa;width:200px;height:200px}.parent:hover{background-color:green}.parent .son1{color:red;background-color:green}.parent>.son2{background-color:#00f}.parent>.son2 .grandson{color:pink}.parent~.son3{color:#000}.parent .son4{color:orange}.parent .parent:hover{background-color:#bfa} ``` ## **扩展** ``` .div1{ width:200px; height:200px; } .div3:extend(.div1){ color:red; } //.div1,.div3{width:200px;height:200px}.div3{color:red} ``` 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行复制（很少使用，这里写出来用于区分下例） ``` .div1{ width:200px; height:200px; } .div3{ .div1(); } //.div1{width:200px;height:200px}.div3{width:200px;height:200px} ``` 使用类选择器是可以在选择器后面加上(),这时我们实际上创建了一个mixins，此类选择器只能在其他类选择器调用不会被解析（和抽象方法优点类似 叫他混合函数吧） ``` .div1(){ width:200px; height:200px; } .div3{ .div1();//或者.div1 括号可以省略 } //.div3{width:200px;height:200px} ``` 混合函数的正确用法： ``` .div1(@w,@h,@bg-color){ width:@w; height:@h; background-color:@bg-color; } .div3{ .div1(100px,100px,#bfa); } //.div3{width:100px;height:100px;background-color:#bfa} ``` 参数顺序及默认值 ``` .div1(@w:200px,@h:200px,@bg-color){ width:@w; height:@h; background-color:@bg-color; } .div3{ .div1(100px,100px,#bfa); .div1(@bg-color:#bfa,@w:100px,@h:100px) } //.div3{width:100px;height:100px;background-color:#bfa} ``` less中的所有数值都可以直接计算 ``` .box{ width:100px+50px; height:100px/2; } //.box{width:150px;height:50px} ``` 浏览器html页面显示的是编译后的css文件，我们在浏览器查找元素并修改时浏览器显示的是css的位置，而css是编译生成的显然不能改css，那么我们让浏览器显示less的位置了，那就是sourceMap，我们让编译less是生成.map文件，我用的是sublime的less2css插件，里面就可以设置 ## **声明变量** `@变量名:变量值` ## **使用变量** `@变量名` ```css @a:100px; @b:#bfa; @c:box6 @d:imgs .box5{ width:@a; color:@b; } /*作为类名 或者 一部分值使用时必须用{}括起来*/ @{c}{ width:@a; background-image:url("@{d}/01.png"); } ``` ## **混合** 将一组属性从一个规则集包含（或混入）到另一个规则集的方法 ``` .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } ``` `.bordered`类所包含的属性就将同时出现在`#menu a`和`.post a`中了 ``` #menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); } ```