前端技术众多，作为一名前端工程师，我们每接触新技术首先要懂得此技术的优势和劣势，这是最基本的。往深入了说还需要懂得技术的应用场景，与之配合的技术等，方便为以后架构做准备。而less作为一门CSS预处理语言，拥有函数式变成的特点，主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在：项目公共样式的定义，如页面主色、固定数值（宽、高、时间等）、公用样式模板、封装省略浏览器兼容前缀的函数等。
1.less的两种使用方式
1.1 直接调用需要引入less.js，和less样式文件，需要注意的是rel需要指定为stylesheet\less。此方式也是在浏览器内部最终将less中的样式转换成css样式之后调用。因页面加载时资源请求较多，故不推荐此方法。
<link rel="stylesheet/less" href="./lessTest.less"/>
<script src="./less.js"></script>
1.2 将less文件编译为css文件后引入，博主使用的是考拉工具，大家可以自行百度。
less语法（本文为了方便将直接使用引入lessTest.less文件的方式，实际开发中建议使用第二种方式）
2. 定义变量 @变量名:变量值;
///定义颜色变量
@pe_color:#204d90; .div1{
width: 100px;
height: 100px;
background: @pe_color;
}
//定义字符串变量
@baseUrl:"./img/";
.div1{
width: 1000px;
height: 1000px;
background-image: url("@{baseUrl}/bannerNBA.jpg");
}
变量计算
*数值计算
@width:1000px;
.div1{
width: @width;
height: @width/2;
margin-top: @width*pi(); //pi()为less函数，详细请查看API
border: 1px solid #000;
}
*颜色计算
@baseColor: #6dffa7;
@bdColor:spin(@baseColor,180);
.div1{
width: 1000px;
height: 1000px;
border: 10px solid @bdColor; //调色盘颜色数值旋转180度，也就是圆心对称点
background: darken(@baseColor,50%); //变暗50%
color:lighten(@baseColor,40%) //变亮40%
}
3. Mixin混合模板 定义模板: .模板名(参数){}
.myborder(@bdwidth,@bdstyle,@bdcolor){
border: @bdwidth @bdstyle @bdcolor;
}
.div1{
width: 1000px;
height: 1000px;
.myborder(5px,dashed,#666666)
}
*定义默认值
.myborder(@bdwidth:10px,@bdstyle:solid,@bdcolor:#86ffff){
border: @bdwidth @bdstyle @bdcolor;
}
.div1{
width: 1000px;
height: 1000px;
.myborder()
}
.myborder(@bdwidth:10px,@bdstyle:solid,@bdcolor:#86ffff){
border: @bdwidth @bdstyle @bdcolor;
}
.div1{
width: 1000px;
height: 1000px;
.myborder(20px)
}
*选择性调用
/*写兼容模板*/
.myTransition(){
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
/*模板A-1*/
.myLinearBackground(style1,@color1,@color2){
background-image:-webkit-linear-gradient(top,@color1,@color2);
background-image:-moz-linear-gradient(top,@color1,@color2);
background-image:-ms-linear-gradient(top,@color1,@color2);
background-image:-o-linear-gradient(top,@color1,@color2);
opacity:.3;
}
/*模板A-2*/
.myLinearBackground(style2,@color1,@color2){
background-image:-webkit-linear-gradient(bottom,@color1,@color2);
background-image:-moz-linear-gradient(bottom,@color1,@color2);
background-image:-ms-linear-gradient(bottom,@color1,@color2);
background-image:-o-linear-gradient(bottom,@color1,@color2);
opacity:.7;
}
.myLinearBackground(@_,@_,@_){ //@_的数量要与两个样式模板参数数量相同
.myTransition(); //@_为通配符，此模板意味只要调用.myLinearBackground()，内部样式无论何时都会调用
}
.div1{
width: 1000px;
height: 1000px;
.myLinearBackground(style1,#86ffff,#ff3e54);
}
.div1:hover{
.myLinearBackground(style2,#ff3e54,#86ffff)
}
3. 嵌套选择器
用嵌套选择器完成一个纯CSS导航：
DOM结构如下：
<ul class="box">
<li>菜单1</li>
<li>菜单2
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
CSS如下：
@bgcolor:#86ffff;
@bdcolor:#ffe91e;
@itemwidth:100px;
@itemheight:50px;
.itemBorder(@bdwidth:2px,@bdstyle:solid,@bdcolor:@bdcolor){
border: @bdwidth @bdstyle @bdcolor;
}
*{
margin:;
padding:;
}
.box{
width: 420px;
height: 50px;
list-style: none;
li{ //相当于ul li
width: @itemwidth;
height: @itemheight;
list-style: none;
line-height: 50px;
text-align: center;
background: @bgcolor;
.itemBorder();
&:hover{ //相当于ul li:hover
.itemBorder(2px,solid,#ff3516)
}
}
>li{ // 相当于ul>li
overflow: hidden;
float: left;
&:hover{ // 相当于ul>li:hover
overflow: visible;
cursor: pointer;
}
}
}
喜欢请点击右下角推荐，如有疑问可以留言。转载请标明出处。