3、Less动态样式语言语法详解

阅读() @2019-03-17 16:05:17

一、less中使用变量:

变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用,所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

Less中的代码:

@color:#ccc;
#header{
   color:@color;
}
h2{
   color:@color;
}

转换CSS之后的代码:

#header{
   color:#ccc;
}
h2{
   color:#ccc;
}

二、混合代码:

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数的调用,就像使用函数一样。

Less中的代码:

.rounded-corners(@radius:5px){
   border-radius:@radius;
}
#header{
   .rounded-corners;
}
#footer{
   .rounded-corners(10px);
}

生成CSS文件的代码:

#header{
    border-radius:5px;
}
#footer{
    border-radius:10px;
}

三、使用嵌套:

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰!

Less中的代码:

#header{
   h1{
      font-size:20px;
      font-weight:bold;
   }
   p{
     font-size:12px;
   }
   a{
      text-decoration:none;
      &:hover{border-width:1px}
   }
}

生成CSS文件中的代码:

#header h1{
   font-size:20px;
   font-weight:bold;
}
#header p{
   font-size:12px;
}
#header p a{
   text-decoration:none;
}
#header p a:hover{
    border-width:1px;
}

&可以理解为是对父级选择器的引用,在写串联和伪类元素时非常有用。

四、函数运算:

运算提供了加减乘除等操作,我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系,Less中的函数--映射了javascript代码,如果你愿意的话可以操作属性值。

Less文件中的代码:

@the-color:#111;

#header{
   color:@the-color*3;
}
#footer{
   background-color:@the-color*4;
}

生成CSS文件中的代码:

#header{
   color:#333;
}
#footer{
   background-color:#444;
}

五、导入:

你可以在main文件中通过下面的形式引入.less文件,.less后缀可带可不带。

@import "lib.less";
@import "lib";

如果你想导入一个CSS文件而且不像Less对它进行处理,只需要使用.css后缀即可。

总结:以上简单说来5中Less语法的使用方法,在Less官方文档中还有很多的语法使用说明,但是个人觉得没有必要一次性全部学齐,这5种足以应对项目开发中的大多数需求,而且官方提供的很多复杂语法仅仅是为了实现一个css效果,太麻烦了,本来使用less的目的就是要简单。如果有兴趣,后期可以慢慢再根据less的API文档进一步学习!

微信二维码