.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;
}