本次教程主要是通过一个实际案例来告诉大家怎么灵活的运用上一节讲到的Less基本语法的特性
本文内容要点
页面结构划分
导入重置浏览器默认样式的CSS
定义公用背景、字体、文字、链接、颜色等样式
页面主要样式实现
总结
进行实例操作之前我们首先要安装好Less，有不会的请参考课程"搭建Webpack编译Less环境"，下面开始实例讲解：
页面结构划分
首先我们一起来看实例设计图，如下图所示：
然后我们先分析这个图的结构，我们可以将这个图可以分为top、content、foot三个部分，我们先来编辑所需HTML代码(i标签里插入的IconFont图标库里的图标)：
<div class="all"> <div class="top"> <i class="iconfont icon-paizhao tu1"></i> <p class="posi-wen1">所有图集</p> </div> <div class="content"> <div class="div-img"> <img src="img/photo1.jpg"> <p class="wenzi"><a href="#">情侣</a></p> <p class="time">2018/03/25</p> </div> <div class="div-img"> <img src="img/photo2.jpg"> <p class="wenzi"><a href="#">旅游</a></p> <p class="time">2018/02/15</p> </div> <div class="div-img"> <img src="img/photo3.jpg"> <p class="wenzi"><a href="#">亲子</a></p> <p class="time">2017/11/25</p> </div> <div class="div-img"> <img src="img/photo4.jpg"> <p class="wenzi"><a href="#">运动</a></p> <p class="time">2017/01/29</p> </div> <div class="div-img"> <img src="img/photo5.jpg"> <p class="wenzi"><a href="#">摄影</a></p> <p class="time">2016/11/25</p> </div> <div class="div-img"> <img src="img/photo6.jpg"> <p class="wenzi"><a href="#">其他</a></p> <p class="time">2016/11/09</p> </div> </div> <div class="foot"> <div> <i class="iconfont icon-shouye2 tu2"></i> <p class="color-gray">首页</p> </div> <div> <i class="iconfont icon-wenjianjia tu3"></i> <p class="po-color">图集</p> </div> <div class="div-tu3"> <i class="iconfont icon-wode tu4"></i> <p class="foot-wo">我</p> </div> </div> </div>
导入重置浏览器默认样式的CSS
接下来我们需要编辑Less代码，为了编辑和维护更加方便，我们最好是学会拆分建立多个less文件，如公用的背景、字体、文字、链接、颜色等可以单独提取出来创建成一个公用的less文件，我们将实例所需less文件创建好，如下图：
先给大家讲解一下上图所示文件，实例的主要代码写在less.less文件夹中，其他三个文件夹是一些共用的颜色，字体等样式，如果你写项目时有需要的话，可以根据需求创建更多公共less文件。(分门别类既能一目了然，也方便我们后续维护代码)
然后我们需要在less.less里面导入重置浏览器默认样式的CSS，重置浏览器默认样式使用的是normalize.css，官方链接在此：http://necolas.github.io/normalize.css/ ，如下所示：
@import "../lib/normalize.css";
上一章讲到过使用@import指令时，如果扩展名是.css,文件将被原样输出。但是原始CSS的@import是在网页文档框架加载完之后再加载样式，可能出现的问题就是会加载出只有框架无样式的网页，我们现在很少用。所以我们可以用.less的文件导入，把normalize.css改名为normalize.less：
@import "../lib/normalize.less";
定义共用背景
接下来我们可以在设计图中提取我们所需要的颜色和字体大小和所需其他公共样式放入刚刚定义的共用.less文件中
font.less
.font18{
font-size: 18px;
}
.font14{
font-size: 14px;
}
.font12{
font-size: 12px;
}color.less（定义不同颜色的变量）
@RosePink:#fd4076; @white:#FFF; @gray1:#f7f7f7; @gray2:#aaaaaa; @black1:#222;
content.less（其他共用样式）
@length:5px;
//混合带参
.mixin-padding(@padding:5px){
padding: @padding;
}
//@arguments的使用
.boreder(@x:0, @w:solid, @color:#000){
/* border:@x,@w,@color; */ //原本这样写
border: @arguments; //用@argements这样写
}然后把共用.less文件全部导入到less.less中，导入代码如下：
@import "color.less"; //引入其他less文件 @import "font.less"; @import "common.less";
页面主要样式实现
现在就可以开始在less.less中写实例所需要的样式了，我们从top部分开始写
.top{
width:100%;
height: 75px;
background-color: @RosePink; //变量
.boreder(); //调用方法
@var:#CCC;
.posi-wen1{
padding-top: 40px;
padding-left: 15px;
color: @white; //变量
.font18; //混合
}
.tu1{
color: @white;
float: right;
font-size: 24px;
margin-top: 10px;
margin-right: 10px;
}
}编译成css是这样的：
.top {
width: 100%;
height: 75px;
background-color: #fd4076;
border: 0 solid #000;
}
.top .posi-wen1 {
padding-top: 40px;
padding-left: 15px;
color: #FFF;
font-size: 18px;
}
.top .tu1 {
color: #FFF;
float: right;
font-size: 24px;
margin-top: 10px;
margin-right: 10px;
}首先我们可以看到其实less和css是差不多的，就是比css多了一点东西，例如top部分的背景颜色和字体颜色调用了公共color.less样式里的颜色变量，这是less特性里的变量。
其次我们可以看到.top里面还调用了公共样式content.less里面的.border()方法，.posi-wen1里面调用了.font18,这种在一个class里面调用另一个class的方法就是less特性里的混合。(当然，.font18我们也可以直接在HTML里面直接使用)
