less使用小总结

.less文件:

/*这句注释会被编译进css*///这句注释不会编译进css/*引入其它的less文件*/@import "v.less";/*变量*/@bgc: yellow;#div1{  width:100px;  height:100px;  background-color: @bgc;}/*常用的数值计算函数*/@num1 : 100;@num2 : 20.3px;@num3 : 32.2px;@num4 : 44.4px;@num5 : 0.5;@num6 : -55;@color: #ff0000;@bgColor : #00ff00;#div1_5{  color:@color;  background-color: @bgColor;}#div2{  width: unit(@num1, px); //unit()对数值连接单位/去除单位  width: round(@num2);    //round()对数值四舍五入取整数  width: ceil(@num3);     //ceil()对数值向下取整数  width: floor(@num4);    //floor()对数值向上取整数  width: percentage(@num5); //percentage()把小数转化为百分比  width: unit(abs(@num3));  //abs()对数值取绝对值  color: lighten(@color, 10%);              //lighten()颜色提亮  background-color: darken(@bgColor, 20%);  //darken()颜色变暗}/*样式的嵌套写法*/.ul1{  list-style: none;  li{line-height:30px;height:30px;}  a{    text-decoration: dashed;  }  a:hover{    color:red;    &:hover{  //&指父选择器      background-color: yellow;    }  }}/*mixin*/.defaultBorder(@width: 10px, @style: solid, @color: red){  border: @width @style @color;}.defaultRadius(@radius){  -webkit-border-radius: @radius;  -moz-border-radius: @radius;  border-radius: @radius;}.box{  width:200px;  height:100px;  .defaultBorder(20px);  .defaultRadius(10px);}/*条件判断when*/.area(@width) when(@width <= 200px){  width:@width;  background-color:yellow;}.area(@width) when(@width > 200px){  width:@width;  background-color: blue;}@media screen and (max-width: 200px){  .when{    .area(100px);  }}@media screen and (min-width: 201px){  .when{    .area(210px);  }}/*loop 估计用不到*/.widthFun(100);.widthFun(@n, @i:10) when (@i <= @n){  width-@{i}{    width: (@i * 100% / @n);  }  .widthFun(@n,(@i+10))}/*上面这段loop编程成css:*/width-10 {  width: 10%;}width-20 {  width: 20%;}width-30 {  width: 30%;}width-40 {  width: 40%;}width-50 {  width: 50%;}width-60 {  width: 60%;}width-70 {  width: 70%;}width-80 {  width: 80%;}width-90 {  width: 90%;}width-100 {  width: 100%;}/*less的匹配模式(类似函数重载) 此处用方向不同的样式三角形举例*/.sanjiao(down ,@w: 100px, @c:#ff6600){  border-width: @w;  border-color: @c transparent transparent transparent;  border-style: solid;}.sanjiao(top ,@w: 100px, @c:#ff6600){  border-width: @w;  border-color: transparent transparent @c transparent;  border-style: solid;}.sanjiao(left ,@w: 100px, @c:#ff6600){  border-width: @w;  border-color: transparent  @c  transparent transparent;  border-style: solid;}.sanjiao(right ,@w: 100px, @c:#ff6600){  border-width: @w;  border-color: transparent transparent transparent @c ;  border-style: solid;}#tranigle{  width: 0;  height: 0;  overflow: hidden;  .sanjiao(right)}/*less中的论据---直接使用函数默认数值*/.border111(@s: solid, @c :#ff6600, @h:10px){  border: @arguments;}/*less中免编译*/.w1{  width: calc(300px * 0.3);     //css3中的计算属性 calc  width: ~'calc(300px * 0.3)';  //~'XXX'指示less不要编译XXX而是直接把XXX写入css文件中}/*less中的important*/.sss{  width: 100px;  height: 100px;  border: 10px;}.box222{  .sss !important; //编译成css后，每个.sss中的属性后面都加上了 !important}/*less中的函数们 参考官网：http://less.bootcss.com/functions/ */.temp{  width: convert(9px, "mm");  //convert()进行长度单位转换 适合游戏场景svg}

编译成的.css文件：

/*这句注释会被编译进css*//*引入其它的less文件*//*变量*/#div1 {  width: 100px;  height: 100px;  background-color: yellow;}/*常用的数值计算函数*/#div1_5 {  color: #ff0000;  background-color: #00ff00;}#div2 {  width: 100px;  width: 20px;  width: 33px;  width: 44px;  width: 50%;  width: 32.2;  color: #ff3333;  background-color: #009900;}/*样式的嵌套写法*/.ul1 {  list-style: none;}.ul1 li {  line-height: 30px;  height: 30px;}.ul1 a {  text-decoration: dashed;}.ul1 a:hover {  color: red;}.ul1 a:hover:hover {  background-color: yellow;}/*mixin*/.box {  width: 200px;  height: 100px;  border: 20px solid red;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}/*条件判断when*/@media screen and (max-width: 200px) {  .when {    width: 100px;    background-color: yellow;  }}@media screen and (min-width: 201px) {  .when {    width: 210px;    background-color: blue;  }}/*loop 估计用不到*/width-10 {  width: 10%;}width-20 {  width: 20%;}width-30 {  width: 30%;}width-40 {  width: 40%;}width-50 {  width: 50%;}width-60 {  width: 60%;}width-70 {  width: 70%;}width-80 {  width: 80%;}width-90 {  width: 90%;}width-100 {  width: 100%;}/*上面这段loop编程成css:*/width-10 {  width: 10%;}width-20 {  width: 20%;}width-30 {  width: 30%;}width-40 {  width: 40%;}width-50 {  width: 50%;}width-60 {  width: 60%;}width-70 {  width: 70%;}width-80 {  width: 80%;}width-90 {  width: 90%;}width-100 {  width: 100%;}/*less的匹配模式(类似函数重载) 此处用方向不同的样式三角形举例*/#tranigle {  width: 0;  height: 0;  overflow: hidden;  border-width: 100px;  border-color: transparent transparent transparent #ff6600;  border-style: solid;}/*less中的论据---直接使用函数默认数值*//*less中免编译*/.w1 {  width: calc(90px);  width: calc(300px * 0.3);}/*less中的important*/.sss {  width: 100px;  height: 100px;  border: 10px;}.box222 {  width: 100px !important;  height: 100px !important;  border: 10px !important;}/*less中的函数们 参考官网：http://less.bootcss.com/functions/ */.temp {  width: 2.38125mm;}