less个人学习笔记

less中文官网：http://lesscss.cn/ 、 http://www.bootcss.com/p/lesscss/

Busy 视频教程：http://www.imooc.com/learn/102 、 http://www.imooc.com/learn/61

^_^肥仔John 入门文章：http://www.cnblogs.com/fsjohnhuang/p/4187675.html

原本跟sass那个似的装大尾巴狼写个api之类的但后来看了这么多资料之后觉的less官网已经很详细详细了。

做了个demo 是用koala编译的，设计图是出自酷站 xiaolinshy: http://www.zcool.com.cn/work/ZNjY1Njk2NA==.html

目录截图：

less文件夹截图：

编译后生成的css文件夹截图：

图片文件夹截图：

页面html

1 <!DOCTYPE html>
2 <htmllang="en"manifes="appcache.appcache">
3 <head>
4     <metacharset="UTF-8">
5     <title>驴友摄影</title>
6     <linkrel="stylesheet"type="text/css"href="css/index.css">
7       </head>
8 <body>
9
10     <divclass="nav">
11         <divclass="cent">
12                   <divclass="logoin">
13                         <spanclass="vam">
14                              <ahref="#">登陆</a>
15 |16                               <ahref="#">注册</a>
17                         </span>
18                         <spanclass="vam">&nbsp;
19                               <inputtype="text"class="search"><inputtype="button"class="search-btn">
20                         </span>
21                   </div>
22             <ul>
23                 <li><ahref="#">首页</a></li>
24                 <li><ahref="#">活动</a></li>
25                 <li><ahref="#">专辑</a></li>
26                 <li><ahref="#">照片</a></li>
27                 <li><ahref="#">团队</a></li>
28                 <li><ahref="#">店铺</a></li>
29             </ul>
30         </div>
31
32     </div>
33     <divclass="cent mt20 clear">
34         <divclass="leftMain">
35             <ahref="#"><imgsrc="img/del_4.jpg"alt=""></a>
36             <divclass="title-info mt20">
37                  <h4>
38 xxx知道谁的丰盛的水电费39                  </h4>
40                  <pclass="tar colr-gray">
41 -------反正就是一些字42                  </p>
43             </div>
44             <divclass="title-info ">
45                  <pclass="colr-gray">
46                        反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字反正就是一些字<spanclass="colr-red">全文>></span>
47                  </p>
48             </div>
49             <h4class="main-title">最新专辑</h4>
50             <ulclass="main-hills clear">
51                   <li>
52                         <ahref="#">
53                               <imgsrc="img/del_5.jpg"alt="">
54                               <divclass="ab-mark">
55                                     <pclass="one">山东-青岛</p>
56                                     <pclass="two">乐享阳光和海浪</p>
57                               </div>
58                         </a>
59                   </li>
60                   <li>
61                         <ahref="#">
62                               <imgsrc="img/del_5.jpg"alt="">
63                               <divclass="ab-mark">
64                                     <pclass="one">山东-青岛</p>
65                                     <pclass="two">乐享阳光和海浪</p>
66                               </div>
67                         </a>
68                   </li>
69                   <li>
70                         <ahref="#">
71                               <imgsrc="img/del_5.jpg"alt="">
72                               <divclass="ab-mark">
73                                     <pclass="one">山东-青岛</p>
74                                     <pclass="two">乐享阳光和海浪</p>
75                               </div>
76                         </a>
77                   </li>
78                   <li>
79                         <ahref="#">
80                               <imgsrc="img/del_5.jpg"alt="">
81                               <divclass="ab-mark">
82                                     <pclass="one">山东-青岛</p>
83                                     <pclass="two">乐享阳光和海浪</p>
84                               </div>
85                         </a>
86                   </li>
87                   <li>
88                         <ahref="#">
89                               <imgsrc="img/del_5.jpg"alt="">
90                               <divclass="ab-mark">
91                                     <pclass="one">山东-青岛</p>
92                                     <pclass="two">乐享阳光和海浪</p>
93                               </div>
94                         </a>
95                   </li>
96                   <li>
97                         <ahref="#">
98                               <imgsrc="img/del_5.jpg"alt="">
99                               <divclass="ab-mark">
100                                     <pclass="one">山东-青岛</p>
101                                     <pclass="two">乐享阳光和海浪</p>
102                               </div>
103                         </a>
104                   </li>
105             </ul>
106             <h4class="main-title">最新专辑</h4>
107             <ulclass="main-hills sub-ul clear">
108                   <li>
109                         <ahref="#">
110                               <imgsrc="img/del_5.jpg"alt="">
111                         </a>
112                         <divclass="subtitle">
113                               <p>
114 艳遇丽江115                               </p>
116                               <pclass="colr-red">
117 西瓜太郎118                               </p>
119                               <p>
120                                     <spanclass="colr-red">123</span>人气&nbsp;/&nbsp;<spanclass="colr-red">123</span>评论            &nbsp;/&nbsp;<spanclass="colr-red">123</span>推荐121                               </p>
122                         </div>
123                   </li>
124                   <li>
125                         <ahref="#">
126                               <imgsrc="img/del_5.jpg"alt="">
127                         </a>
128                         <divclass="subtitle">
129                               <p>
130 艳遇丽江131                               </p>
132                               <pclass="colr-red">
133 西瓜太郎134                               </p>
135                               <p>
136                                     <spanclass="colr-red">123</span>人气&nbsp;/&nbsp;<spanclass="colr-red">123</span>评论            &nbsp;/&nbsp;<spanclass="colr-red">123</span>推荐137                               </p>
138                         </div>
139                   </li>
140                   <li>
141                         <ahref="#">
142                               <imgsrc="img/del_5.jpg"alt="">
143                         </a>
144                         <divclass="subtitle">
145                               <p>
146 艳遇丽江147                               </p>
148                               <pclass="colr-red">
149 西瓜太郎150                               </p>
151                               <p>
152                                     <spanclass="colr-red">123</span>人气&nbsp;/&nbsp;<spanclass="colr-red">123</span>评论            &nbsp;/&nbsp;<spanclass="colr-red">123</span>推荐153                               </p>
154                         </div>
155                   </li>
156                   <li>
157                         <ahref="#">
158                               <imgsrc="img/del_5.jpg"alt="">
159                         </a>
160                         <divclass="subtitle">
161                               <p>
162 艳遇丽江163                               </p>
164                               <pclass="colr-red">
165 西瓜太郎166                               </p>
167                               <p>
168                                     <spanclass="colr-red">123</span>人气&nbsp;/&nbsp;<spanclass="colr-red">123</span>评论            &nbsp;/&nbsp;<spanclass="colr-red">123</span>推荐169                               </p>
170                         </div>
171                   </li>
172                   <li>
173                         <ahref="#">
174                               <imgsrc="img/del_5.jpg"alt="">
175                         </a>
176                         <divclass="subtitle">
177                               <p>
178 艳遇丽江179                               </p>
180                               <pclass="colr-red">
181 西瓜太郎182                               </p>
183                               <p>
184                                     <spanclass="colr-red">123</span>人气&nbsp;/&nbsp;<spanclass="colr-red">123</span>评论            &nbsp;/&nbsp;<spanclass="colr-red">123</span>推荐185                               </p>
186                         </div>
187                   </li>
188                   <li>
189                         <ahref="#">
190                               <imgsrc="img/del_5.jpg"alt="">
191                         </a>
192                         <divclass="subtitle">
193                               <p>
194 艳遇丽江195                               </p>
196                               <pclass="colr-red">
197 西瓜太郎198                               </p>
199                               <p>
200                                     <spanclass="colr-red">123</span>人气&nbsp;/&nbsp;<spanclass="colr-red">123</span>评论            &nbsp;/&nbsp;<spanclass="colr-red">123</span>推荐201                               </p>
202                         </div>
203                   </li>
204             </ul>
205         </div>
206         <divclass="rightMain">
207             <h3class="rigth-h3 bg-red">
208 推荐活动209             </h3>
210             <ulclass="ul-lists">
211                 <li><ahref="#">云南是很多刚开始旅行者的首站目标</a></li>
212                 <li><ahref="#">云南是很多刚开始旅行者的首站目标</a></li>
213                 <li><ahref="#">云南是很多刚开始旅行者的首站目标</a></li>
214                 <li><ahref="#">云南是很多刚开始旅行者的首站目标</a></li>
215                 <li><ahref="#">云南是很多刚开始旅行者的首站目标</a></li>
216                 <li><ahref="#">云南是很多刚开始旅行者的首站目标</a></li>
217                 <li><ahref="#">云南是很多刚开始旅行者的首站目标</a></li>
218             </ul>
219             <divclass="mt10">
220                 <ahref="#"><imgsrc="img/del_1.jpg"alt=""></a>
221             </div>
222             <h3class="rigth-h3 mt30">
223 最新评论224             </h3>
225             <ulclass="ul-reviews">
226                 <li>
227                     <ahref="#"class="portrait">
228                         <imgsrc="img/del_2.jpg"alt="">
229                     </a>
230                     <divclass="rev-text">
231                         <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山232                     </div>
233                 </li>
234                 <li>
235                     <ahref="#"class="portrait">
236                         <imgsrc="img/del_2.jpg"alt="">
237                     </a>
238                     <divclass="rev-text">
239                         <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山240                     </div>
241                 </li>
242                 <li>
243                     <ahref="#"class="portrait">
244                         <imgsrc="img/del_2.jpg"alt="">
245                     </a>
246                     <divclass="rev-text">
247                         <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山248                     </div>
249                 </li>
250                 <li>
251                     <ahref="#"class="portrait">
252                         <imgsrc="img/del_2.jpg"alt="">
253                     </a>
254                     <divclass="rev-text">
255                         <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山256                     </div>
257                 </li>
258                 <li>
259                     <ahref="#"class="portrait">
260                         <imgsrc="img/del_2.jpg"alt="">
261                     </a>
262                     <divclass="rev-text">
263                         <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山264                     </div>
265                 </li>
266                 <li>
267                     <ahref="#"class="portrait">
268                         <imgsrc="img/del_2.jpg"alt="">
269                     </a>
270                     <divclass="rev-text">
271                         <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山272                     </div>
273                 </li>
274                 <li>
275                     <ahref="#"class="portrait">
276                         <imgsrc="img/del_2.jpg"alt="">
277                     </a>
278                     <divclass="rev-text">
279                         <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山280                     </div>
281                 </li>
282                 <liclass="end">
283                     <ahref="#"class="portrait">
284                         <imgsrc="img/del_2.jpg"alt="">
285                     </a>
286                     <divclass="rev-text">
287                         <span>小熊</span>在云南是很多刚开始旅游这里拥有众多雪山、峡谷、高山288                     </div>
289                 </li>
290             </ul>
291             <h3class="rigth-h3 mt35">
292 店铺推荐293             </h3>
294             <divclass="over">
295                 <ulclass="ul-recoms clear">
296                     <li>
297                         <ahref=""><imgsrc="img/del_3.jpg"alt=""></a>
298                         <p>我就是王二小</p>
299                     </li>
300                     <li>
301                         <ahref=""><imgsrc="img/del_3.jpg"alt=""></a>
302                         <p>别用鼠标点我</p>
303                     </li>
304                     <li>
305                         <ahref=""><imgsrc="img/del_3.jpg"alt=""></a>
306                         <p>红配绿</p>
307                     </li>
308                     <li>
309                         <ahref=""><imgsrc="img/del_3.jpg"alt=""></a>
310                         <p>飞飞</p>
311                     </li>
312                     <li>
313                         <ahref=""><imgsrc="img/del_3.jpg"alt=""></a>
314                         <p>石磊</p>
315                     </li>
316                     <li>
317                         <ahref=""><imgsrc="img/del_3.jpg"alt=""></a>
318                         <p>黄金太阳</p>
319                     </li>
320                 </ul>
321             </div>
322         </div>
323     </div>
324     <divclass="footr">
325       <divclass="cent">
326 Copy Right 1996-2014 domain.com All Rights Reserved.某某公司版权所有.京ICP备1234656号327       </div>
328     </div>
329 </body>
330 </html>

View Code

less 文件 less-base.less 底层库：

1 .base(){
2 html {margin:0;padding:0;border:0;_background-image:url(n1othing.txt)}
3 body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline; }
4 ol, ul, li{list-style:none; }
5 body{line-height:1.5;background:white;font-family:'microsoft yahei', Arial, Helvetica, sans-serif;font-size:12px;color:#333;}
6 table,tr, th, td{border-collapse:collapse;margin:0;padding:0;font-size:100%;vertical-align:baseline;}
7 caption, th, td{text-align:left;font-weight:normal;float:none !important; }
8 table, th, td, select, img, input,object{vertical-align:middle;}
9 :focus{outline:0;}
10 input,select{margin:0;}
11 a{color:#005EA7;text-decoration:none; }
12 a:hover{color:#C7000B;text-decoration:none; }
13 p,a,td{word-wrap:break-word;word-break:break-all;}
14 img{border:none; }
15 textarea{resize:none;border:1px solid #ccc;}
16 textarea:hover{border-color:#ccc;}
17 input[type="text"],input[type="button"]{-webkit-appearance:none;border-radius:0;font-family:'microsoft yahei','黑体', Arial, Helvetica, sans-serif;}
18 input[type="text"]{border:solid 1px #ccc;border-radius:0;}
19 html,body{}
20 dfn{font-style:normal;font-family:Arial;}
21 }22
23 .fl(){float:left; }
24 .fr(){float:right;}
25 .float( @dire : left ){
26 float:@dire;
27 }
28
29 .clear(){
30 *zoom:1;
31 &:after{32 content: "";
33 display:block;
34 height:0;
35 clear:both;
36 visibility:hidden;
37 overflow:hidden;
38     }
39 }40
41 .clr(){
42 clear:both;
43 display:block;
44 font-size:0;
45 height:0;
46 line-height:0;
47 overflow:hidden;
48 }
49
50 .base-fonts( @n,@i:12,@un:px) when ( @i =< @n ){
51 .fn-@{i} {
52 font-size:unit(@i, @un);
53     }
54 .base-fonts( @n,( @i+2 ) );55 }56
57 .base-styles(@mt:mt,@n,@i:5,@un:px ) when ( @i =< @n ){
58 .@{mt}-@{i} {
59 margin-top:unit(@i, @un);
60     }
61 .base-styles( @n,( @i+5 ) );62 }63
64 .ellipsis(){
65 white-space:nowrap;
66 text-overflow:ellipsis;
67 overflow:hidden;
68 }
69
70 .tal(){text-align:right; }
71 .tac(){text-align:center; }
72 .tar(){text-align:right; }
73 .text-align( @dir:left ){text-align:@dir;}
74 .over(){overflow:hidden; }
75 .hide(){displaye:none; }
76 .block(){displaye:block; }

View Code

less 文件 index.less ：

1 @import (reference) "less-base.less";2
3 .base();4 @back:#212121;5 @red:#e60044;6 @gray:#dadada;7 @gray2:#787878;8
9 .base-fonts(48);10
11
12
13 .over{overflow:hidden; }
14 .vam{vertical-align:middle; }
15 .tal{text-align:right; }
16 .tar{text-align:right; }
17 .colr-gray{color:@gray2;}
18 .colr-red{color:@red;}
19 .fl{float:left;}
20 .fr{float:right;}
21 .clear{
22 *zoom:1;
23 &:after{24 content: "";
25 display:block;
26 height:0;
27 clear:both;
28 visibility:hidden;
29 overflow:hidden;
30     }
31 }32
33 .mt10{margin-top:10px!important;}
34 .mt20{margin-top:20px!important;}
35 .mt30{margin-top:30px!important;}
36 .mt35{margin-top:35px!important;}
37
38 .cent{width:1000px;margin:0 auto; }
39 .logoin{
40 height:36px;
41 line-height:44px;
42 text-align:right;
43 overflow:hidden;
44 font-size:12px;
45 color:#fff;
46 .search{47 margin:0;
48 padding:0;
49 width:157px;
50 height:24px;
51 line-height:24px;
52 vertical-align:middle;
53 border:none;
54     }
55 .search-btn{
56 margin:0;
57 padding:0;
58 width:26px;
59 height:24px;
60 background-color:#fff;
61 border:none;
62 vertical-align:middle;
63 background:#fff url(../img/search-ico.png) no-repeat center center;
64 cursor:pointer;
65     }
66 }67 .nav{
68 ul{ float:right;}
69 ul li{
70 float:left;
71 line-height:59px;
72 width:74px;
73 text-align:right;
74     }
75 a{
76 color:#fff;
77 text-decoration:none;
78     }
79
80 background:@back;81 .clear();82
83 }84
85 .title-info{
86 margin-bottom:-1px;
87 border:1px solid @gray;
88 padding:20px;
89 line-height:20px;
90 font-size:12px;
91 h4{92 font-size:22px;
93     }
94
95 }96
97 .leftMain{
98 .fl();99 width:746px;
100 }
101
102 .main-title{
103 height:70px;
104 overflow:hidden;
105 text-indent:20px;
106 font-size:18px;
107 line-height:86px;
108 }
109
110 .main-hills{
111 width:(235+20)*3px;
112 height:510px;
113 overflow:hidden;
114 li{115 position:relative;
116 .fl();117 width:235px;
118 margin:0 20px 40px 0;
119     }
120 .ab-mark{
121 position:absolute;
122 left:0;
123 top:40px;
124 background:rgba(0, 0, 0, 0.5);
125 padding:16px 24px;
126 width:163-(24*2)+px;
127 line-height:30px;
128 color:#fff;
129     }
130 img{
131 width:235px;
132 height:235px;
133     }
134 .one{
135 font-size:20px;
136 font-weight:bold;
137     }
138 .two{
139 font-size:14px;
140     }
141 &.sub-ul{
142 height:636px;
143 li{144 margin:0 20px 24px 0;
145         }
146 }147 .subtitle{
148 padding:10px 0 0 24px;
149 line-height:20px;
150 font-size:12px;
151     }
152 }153
154 .rightMain{
155 .fr();156 width:235px;
157 }
158
159 .rigth-h3{
160 line-height:38px;
161 background:@back;
162 color:#fff;
163 text-indent:13px;
164 font-size:18px;
165
166 &.bg-red{167 background:@red;
168     }
169 }170
171 .ul-lists{
172 border-left:1px solid @gray;
173 border-right:1px solid @gray;
174 li{175 line-height:50px;
176 overflow:hidden;
177 border-bottom:1px solid @gray;
178     }
179
180 a{
181 display:block;
182 margin:0 12px;
183 font-size:12px;
184 .ellipsis();185 color:@back;
186     }
187 }188
189 .ul-reviews{
190 li{191 padding:12px 0 10px 14px;
192 border-bottom:1px solid @gray;
193 .clear();194     }
195 .end{
196 border:none;
197     }
198 .portrait{
199 .fl();200     }
201 .rev-text{
202 font-size:12px;
203 line-height:20px;
204 margin:0 16px 0 54px;
205 height:40px;
206 overflow:hidden;
207 span{ margin-right:3px;}
208 }209 }210
211 .ul-recoms{
212 padding:20px 0 0 10px;
213 width:230px;
214 li{215 .fl();216 margin-right:15px;
217     }
218
219 img{
220 width:100px;
221 height:100px;
222     }
223
224 p{
225 height:40px;
226 line-height:28px;
227 font-size:12px;
228 text-indent:13px;
229     }
230 }231
232 .footr{
233 margin-top:20px;
234 background:@back;
235 line-height:58px;
236 text-align:center;
237 color:#fff;
238 font-size:12px;
239 }

View Code

koala编译之后的index.css：

1 html{
2 margin:0;
3 padding:0;
4 border:0;
5 _background-image:url(n1othing.txt);
6   }
7 body,8 div,9 span,10 object,11 iframe,12 h1,13 h2,14 h3,15 h4,16 h5,17 h6,18 p,19 blockquote,20 pre,21 a,22 abbr,23 acronym,24 address,25 code,26 del,27 dfn,28 em,29 img,30 q,31 dl,32 dt,33 dd,34 ol,35 ul,36 li,37 fieldset,38 form,39 label,40 legend,41 caption,42 tbody,43 tfoot,44 thead,45 article,46 aside,47 dialog,48 figure,49 footer,50 header,51 hgroup,52 nav,53 section{
54 margin:0;
55 padding:0;
56 border:0;
57 font-size:100%;
58 vertical-align:baseline;
59   }
60 ol,61 ul,62 li{
63 list-style:none;
64   }
65 body{
66 line-height:1.5;
67 background:white;
68 font-family:'microsoft yahei', Arial, Helvetica, sans-serif;
69 font-size:12px;
70 color:#333;
71   }
72 table,73 tr,74 th,75 td{
76 border-collapse:collapse;
77 margin:0;
78 padding:0;
79 font-size:100%;
80 vertical-align:baseline;
81   }
82 caption,83 th,84 td{
85 text-align:left;
86 font-weight:normal;
87 float:none !important;
88   }
89 table,90 th,91 td,92 select,93 img,94 input,95 object{
96 vertical-align:middle;
97   }
98 :focus{
99 outline:0;
100   }
101 input,102 select{
103 margin:0;
104   }
105 a{
106 color:#005EA7;
107 text-decoration:none;
108   }
109 a:hover{
110 color:#C7000B;
111 text-decoration:none;
112   }
113 p,114 a,115 td{
116 word-wrap:break-word;
117 word-break:break-all;
118   }
119 img{
120 border:none;
121   }
122 textarea{
123 resize:none;
124 border:1px solid #ccc;
125   }
126 textarea:hover{
127 border-color:#ccc;
128   }
129 input[type="text"],130 input[type="button"]{
131 -webkit-appearance:none;
132 border-radius:0;
133 font-family:'microsoft yahei', '黑体', Arial, Helvetica, sans-serif;
134   }
135 input[type="text"]{
136 border:solid 1px #ccc;
137 border-radius:0;
138   }
139 dfn{
140 font-style:normal;
141 font-family:Arial;
142   }
143 .fn-12{
144 font-size:12px;
145   }
146 .fn-14{
147 font-size:14px;
148   }
149 .fn-16{
150 font-size:16px;
151   }
152 .fn-18{
153 font-size:18px;
154   }
155 .fn-20{
156 font-size:20px;
157   }
158 .fn-22{
159 font-size:22px;
160   }
161 .fn-24{
162 font-size:24px;
163   }
164 .fn-26{
165 font-size:26px;
166   }
167 .fn-28{
168 font-size:28px;
169   }
170 .fn-30{
171 font-size:30px;
172   }
173 .fn-32{
174 font-size:32px;
175   }
176 .fn-34{
177 font-size:34px;
178   }
179 .fn-36{
180 font-size:36px;
181   }
182 .fn-38{
183 font-size:38px;
184   }
185 .fn-40{
186 font-size:40px;
187   }
188 .fn-42{
189 font-size:42px;
190   }
191 .fn-44{
192 font-size:44px;
193   }
194 .fn-46{
195 font-size:46px;
196   }
197 .fn-48{
198 font-size:48px;
199   }
200 .over{
201 overflow:hidden;
202   }
203 .vam{
204 vertical-align:middle;
205   }
206 .tal{
207 text-align:right;
208   }
209 .tar{
210 text-align:right;
211   }
212 .colr-gray{
213 color:#787878;
214   }
215 .colr-red{
216 color:#e60044;
217   }
218 .fl{
219 float:left;
220   }
221 .fr{
222 float:right;
223   }
224 .clear{
225 *zoom:1;
226   }
227 .clear:after{
228 content:"";
229 display:block;
230 height:0;
231 clear:both;
232 visibility:hidden;
233 overflow:hidden;
234   }
235 .mt10{
236 margin-top:10px!important;
237   }
238 .mt20{
239 margin-top:20px!important;
240   }
241 .mt30{
242 margin-top:30px!important;
243   }
244 .mt35{
245 margin-top:35px!important;
246   }
247 .cent{
248 width:1000px;
249 margin:0 auto;
250   }
251 .logoin{
252 height:36px;
253 line-height:44px;
254 text-align:right;
255 overflow:hidden;
256 font-size:12px;
257 color:#fff;
258   }
259 .logoin .search{
260 margin:0;
261 padding:0;
262 width:157px;
263 height:24px;
264 line-height:24px;
265 vertical-align:middle;
266 border:none;
267   }
268 .logoin .search-btn{
269 margin:0;
270 padding:0;
271 width:26px;
272 height:24px;
273 background-color:#fff;
274 border:none;
275 vertical-align:middle;
276 background:#ffffff url(../img/search-ico.png) no-repeat center center;
277 cursor:pointer;
278   }
279 .nav{
280 background:#212121;
281 *zoom:1;
282   }
283 .nav ul{
284 float:right;
285   }
286 .nav ul li{
287 float:left;
288 line-height:59px;
289 width:74px;
290 text-align:right;
291   }
292 .nav a{
293 color:#fff;
294 text-decoration:none;
295   }
296 .nav:after{
297 content:"";
298 display:block;
299 height:0;
300 clear:both;
301 visibility:hidden;
302 overflow:hidden;
303   }
304 .nav:after{
305 content:"";
306 display:block;
307 height:0;
308 clear:both;
309 visibility:hidden;
310 overflow:hidden;
311   }
312 .title-info{
313 margin-bottom:-1px;
314 border:1px solid #dadada;
315 padding:20px;
316 line-height:20px;
317 font-size:12px;
318   }
319 .title-info h4{
320 font-size:22px;
321   }
322 .leftMain{
323 float:left;
324 width:746px;
325   }
326 .main-title{
327 height:70px;
328 overflow:hidden;
329 text-indent:20px;
330 font-size:18px;
331 line-height:86px;
332   }
333 .main-hills{
334 width:765px;
335 height:510px;
336 overflow:hidden;
337   }
338 .main-hills li{
339 position:relative;
340 float:left;
341 width:235px;
342 margin:0 20px 40px 0;
343   }
344 .main-hills .ab-mark{
345 position:absolute;
346 left:0;
347 top:40px;
348 background:rgba(0, 0, 0, 0.5);
349 padding:16px 24px;
350 width:115 px;
351 line-height:30px;
352 color:#fff;
353   }
354 .main-hills img{
355 width:235px;
356 height:235px;
357   }
358 .main-hills .one{
359 font-size:20px;
360 font-weight:bold;
361   }
362 .main-hills .two{
363 font-size:14px;
364   }
365 .main-hills.sub-ul{
366 height:636px;
367   }
368 .main-hills.sub-ul li{
369 margin:0 20px 24px 0;
370   }
371 .main-hills .subtitle{
372 padding:10px 0 0 24px;
373 line-height:20px;
374 font-size:12px;
375   }
376 .rightMain{
377 float:right;
378 width:235px;
379   }
380 .rigth-h3{
381 line-height:38px;
382 background:#212121;
383 color:#fff;
384 text-indent:13px;
385 font-size:18px;
386   }
387 .rigth-h3.bg-red{
388 background:#e60044;
389   }
390 .ul-lists{
391 border-left:1px solid #dadada;
392 border-right:1px solid #dadada;
393   }
394 .ul-lists li{
395 line-height:50px;
396 overflow:hidden;
397 border-bottom:1px solid #dadada;
398   }
399 .ul-lists a{
400 display:block;
401 margin:0 12px;
402 font-size:12px;
403 white-space:nowrap;
404 text-overflow:ellipsis;
405 overflow:hidden;
406 color:#212121;
407   }
408 .ul-reviews li{
409 padding:12px 0 10px 14px;
410 border-bottom:1px solid #dadada;
411 *zoom:1;
412   }
413 .ul-reviews li:after{
414 content:"";
415 display:block;
416 height:0;
417 clear:both;
418 visibility:hidden;
419 overflow:hidden;
420   }
421 .ul-reviews li:after{
422 content:"";
423 display:block;
424 height:0;
425 clear:both;
426 visibility:hidden;
427 overflow:hidden;
428   }
429 .ul-reviews .end{
430 border:none;
431   }
432 .ul-reviews .portrait{
433 float:left;
434   }
435 .ul-reviews .rev-text{
436 font-size:12px;
437 line-height:20px;
438 margin:0 16px 0 54px;
439 height:40px;
440 overflow:hidden;
441   }
442 .ul-reviews .rev-text span{
443 margin-right:3px;
444   }
445 .ul-recoms{
446 padding:20px 0 0 10px;
447 width:230px;
448   }
449 .ul-recoms li{
450 float:left;
451 margin-right:15px;
452   }
453 .ul-recoms img{
454 width:100px;
455 height:100px;
456   }
457 .ul-recoms p{
458 height:40px;
459 line-height:28px;
460 font-size:12px;
461 text-indent:13px;
462   }
463 .footr{
464 margin-top:20px;
465 background:#212121;
466 line-height:58px;
467 text-align:center;
468 color:#fff;
469 font-size:12px;
470   }

View Code

后记：

那个底层库其实循环的部分让我想了好久，看了“^_^肥仔John”那文章才知道是递归循环，从这点个人觉得不如sass，当然那个底层的库还可以在多一些方法，比如给这个css3加前缀的方法，这demo里我都没用到继承之类的比较典型的预编译的东东。。。。差不多这样不会看api吧~

转载于:https://www.cnblogs.com/auok/p/4897452.html

less个人学习笔记相关推荐

PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
Go 学习推荐 —（Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程）
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...
NuGet学习笔记(3) 搭建属于自己的NuGet服务器
文章导读创建NuGetServer Web站点发布站点到IIS 添加本地站点到包包数据源在上一篇NuGet学习笔记(2) 使用图形化界面打包自己的类库中讲解了如何打包自己的类库,接下来进行最重 ...

less个人学习笔记

less个人学习笔记相关推荐

最新文章

热门文章