[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(); } ```