less其实就是把less文件解析成css文件
利用koala 把目录放进去，然后在右键设置输出路径，然后点击编译，就会出现一个css文件
less的注释
// 不会被编译的，不会在css中显示，优先
/**/ 会被编译的，会在css中显示
定义一个变量
@test_width:300px; @变量名：值
使用变量
.box{ width:@test_width; height:@test_width; background-color:yellow; }
混合
.border{ border:solid 5px pink } .box{ width:@test_width; height:@test_width; background-color:yellow; .border } .box2{ .box1; .border; margin：10px }
混合可带参数
.border_02(@border_width){ border:solid yellow @border_width; } .test_hunhe{ .border_02(30px)//这里必须要传一个值 }
混合带吗默认值
.border_03(@border_width：10px){ border:solid red @border_width; } .test_hunhe_03{ .border_03()//因为带有默认值，可以不传值 }
//匹配 .triangle(right,@w:5px,@c:blue){ border-width:@w; border-color: transparent @c transparent transparent; border-style: dashed solid dashed dashed; } .triangle(bottom,@w:5px,@c:blue){ border-width:@w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed; } .triangle(top,@w:5px,@c:blue){ border-width:@w; border-color: @c transparent transparent transparent; border-style: solid dashed dashed dashed; } //@_ 默认就会带着的样式 .triangle(@_,@w:5px,@c:blue){ width: 0; height: 0; overflow: hidden; } .triangle{ .triangle(top) }
//嵌套 .list{ width: 600px; margin: 30px auto; padding: 0; list-style: none; li{ height: 30px; line-height: 30px; background: pink; margin-bottom: 5px; } a{ float: left; //&他的上一层选择器 &:hover{ color:red } } span{ float: right; } }
//@argument 所有参数一步代入 //避免编译 ~‘.....‘ .test_03{ width: ~‘calc(300px-30px)‘; } //！important 优先级最高 .test_04{ .test_03 !important; }
@charset "utf-8"; //引入less文件 @import "ku"; //引入css文件 在哪引入就会出现在哪 @import (less) "a.css"; body{ background:#cccccc; }
原文：https://www.cnblogs.com/joer717/p/10643860.html