首页 > 代码库 > less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)
less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)
前端技术众多，作为一名前端工程师，我们每接触新技术首先要懂得此技术的优势和劣势，这是最基本的。往深入了说还需要懂得技术的应用场景，与之配合的技术等，方便为以后架构做准备。而less作为一门CSS预处理语言，拥有函数式变成的特点，主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在：项目公共样式的定义，如页面主色、固定数值（宽、高、时间等）、公用样式模板、封装省略浏览器兼容前缀的函数等。
1.less的两种使用方式
1.1 直接调用需要引入less.js，和less样式文件，需要注意的是rel需要指定为stylesheet\less。此方式也是在浏览器内部最终将less中的样式转换成css样式之后调用。因页面加载时资源请求较多，故不推荐此方法。
<link rel="stylesheet/less" href="http://www.mamicode.com/lessTest.less"/><script src="http://www.mamicode.com/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: 0; padding: 0;}.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; } }}
less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。