快速开发CSS的利器 - less 嵌套规则

HTML5学堂：嵌套，在我们HTML代码中一直都在使用，如div中的p元素等，对于我们样式的书写，需要使用div p {} 进行样式的指定，这也就是我们的后代选择器。不过写过项目的人都知道，为了防止样式的覆盖，每种选择器都是一大长串，写起来很麻烦~本文给大家讲解的是less 嵌套规则，可以解决掉样式覆盖的问题。

less 嵌套规则

嵌套，在我们HTML代码中一直都在使用，如div中的p元素等，对于我们样式的书写，需要使用div p {} 进行样式的指定，这也就是我们的后代选择器。不过写过项目的人都知道，为了防止样式的覆盖，每种选择器都是一大长串，写起来很麻烦~

less利用嵌套的书写方式，让我们在写后代选择器的时候有了新的方法。原来后代选择器的书写方式：

1. .arclist dl {
2.     padding: 10px 20px;
3.     border-bottom: 1px dotted #ccc;
4. }
5. .arclist dl:after {
6.     .common-clearfloat;
7. }
8. .arclist dt {
9.     float: left;
10.     width: 120px;
11.     height: 120px;
12. }

通过嵌套的方式书写样式的方法：

1. .arclist {
2.     dl {
3.         padding: 10px 20px;
4.         border-bottom: 1px dotted #ccc;
5.         &:after {
6.             .common-clearfloat;
7.         }
8.         dt {    
9.             float: left;
10.             width: 120px;
11.             height: 120px;
12.         }
13.     }
14. }

依旧看我们之前实现的效果图

在使用嵌套方法前的样式：

1. .common-dta {
2.     overflow: hidden;
3.     display: block;
4.     height: 100%;
5. }
6. .common-dtimg {
7.     display: block;
8.     width: 100%;
9.     height: 100%;
10.     border: none;
11. }
12. .common-clearfloat {
13.     content: "\200B";
14.     clear: both;
15.     display: block;
16.     height: 0;
17. }
18. .text-overflow {
19.     display:block;
20.     word-break:keep-all;
21.     white-space:nowrap;
22.     overflow:hidden;
23.     text-overflow:ellipsis;
24. }
25. .wrap {
26.     width: 1020px;
27.     margin: 0 auto;
28. }
29. .arclist {
30.     float: left;
31.     width: 600px;
32.     background: rgba(227, 227, 227, 0.2);
33. }
34. .arclist2 {
35.     float: right;
36.     width: 400px;
37.     background: rgba(227, 227, 227, 0.2);
38. }
39. .arclist dl {
40.     padding: 10px 20px;
41.     border-bottom: 1px dotted #ccc;
42. }
43. .arclist dl:after {
44.     .common-clearfloat;
45. }
46. .arclist dt {
47.     float: left;
48.     width: 180px;
49.     height: 180px;
50. }
51. .arclist dt a {
52.     .common-dta;
53.     border-radius: 5px;
54.     box-shadow: 0 0 0 2px #39f;
55. }
56. .arclist dt img {
57.     .common-dtimg;
58. }
59. .arclist dd {
60.     float: left;
61.     width: 360px;
62.     height: 180px;
63.     padding: 0 0 0 20px;
64. }
65. .arclist dd h2 {
66.     height: 36px;
67.     margin-bottom: 10px;
68.     font-size: 30px;
69.     line-height: 36px;
70.     color: #39f;
71.     .text-overflow;
72. }
73. .arclist dd h2 a {
74.     color: #39f;
75. }
76. .arclist dd p {
77.     overflow: hidden;
78.     height: 126px;
79.     font-size: 14px;
80.     line-height: 18px;
81. }
82. .arclist2 dl {
83.     padding: 10px 20px;
84.     border-bottom: 1px dotted #ccc;
85. }
86. .arclist2 dl:after {
87.     .common-clearfloat;
88. }
89. .arclist2 dt {
90.     float: left;
91.     width: 120px;
92.     height: 120px;
93. }
94. .arclist2 dt a {
95.     .common-dta;
96.     border-radius: 50%;
97.     box-shadow: 0 0 0 2px #f39;
98. }
99. .arclist2 dt img {
100.     .common-dtimg;
101. }
102. .arclist2 dd {
103.     float: left;
104.     width: 220px;
105.     height: 120px;
106.     padding: 0 0 0 20px;
107. }
108. .arclist2 dd h2 {
109.     height: 30px;
110.     margin-bottom: 10px;
111.     font-size: 24px;
112.     line-height: 30px;
113.     .text-overflow;
114. }
115. .arclist2 dd h2 a {
116.     color: #f39;
117. }
118. .arclist2 dd p {
119.     overflow: hidden;
120.     height: 80px;
121.     font-size: 14px;
122.     line-height: 20px;
123. }

欢迎沟通交流~HTML5学堂

使用嵌套方法之后的样式代码：

1. .common-dta {
2.     overflow: hidden;
3.     display: block;
4.     height: 100%;
5. }
6. .common-dtimg {
7.     display: block;
8.     width: 100%;
9.     height: 100%;
10.     border: none;
11. }
12. .common-clearfloat {
13.     content: "\200B";
14.     clear: both;
15.     display: block;
16.     height: 0;
17. }
18. .text-overflow {
19.     display:block;/*内联对象需加*/
20.     word-break:keep-all;/* 不换行 */
21.     white-space:nowrap;/* 不换行 */
22.     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
23.     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
24. }
25. .wrap {
26.     width: 1020px;
27.     margin: 0 auto;
28. }
29. .arclist {
30.     float: left;
31.     width: 600px;
32.     background: rgba(227, 227, 227, 0.2);
33.     dl {
34.         padding: 10px 20px;
35.         border-bottom: 1px dotted #ccc;
36.         &:after {
37.             .common-clearfloat;
38.         }
39.         
40.         dt {    
41.             float: left;
42.             width: 180px;
43.             height: 180px;
44.             a {    
45.                 .common-dta;
46.                 border-radius: 5px;
47.                 box-shadow: 0 0 0 2px #39f;
48.             }
49.             img {
50.                 .common-dtimg;    
51.             }
52.         }
53.         dd {
54.             float: left;
55.             width: 360px;
56.             height: 180px;
57.             padding: 0 0 0 20px;            
58.             h2 {
59.                 height: 36px;
60.                 margin-bottom: 10px;
61.                 font-size: 30px;
62.                 line-height: 36px;
63.                 color: #39f;
64.                 .text-overflow;
65.                 a {
66.                     color: #39f;
67.                 }
68.             }
69.             p {
70.                 overflow: hidden;
71.                 height: 126px;
72.                 font-size: 14px;
73.                 line-height: 18px;
74.             }
75.         }
76.     }
77. }
78. .arclist2 {
79.     float: right;
80.     width: 400px;
81.     background: rgba(227, 227, 227, 0.2);
82.     dl {
83.         padding: 10px 20px;
84.         border-bottom: 1px dotted #ccc;
85.         &:after {
86.             .common-clearfloat;
87.         }
88.         dt {
89.             float: left;
90.             width: 120px;
91.             height: 120px;
92.             a {
93.                 .common-dta;
94.                 border-radius: 50%;
95.                 box-shadow: 0 0 0 2px #f39;
96.             }
97.             img {
98.                 .common-dtimg;
99.             }
100.         }
101.         dd {
102.             float: left;
103.             width: 220px;
104.             height: 120px;
105.             padding: 0 0 0 20px;
106.             h2 {
107.                 height: 30px;
108.                 margin-bottom: 10px;
109.                 font-size: 24px;
110.                 line-height: 30px;
111.                 .text-overflow;
112.                 a {
113.                     color: #f39;
114.                 }
115.             }
116.             p {
117.                 overflow: hidden;
118.                 height: 80px;
119.                 font-size: 14px;
120.                 line-height: 20px;
121.             }
122.         }
123.     }
124. }

通过使用嵌套的方式，让样式代码的书写变得更加简单，同时能够最快速度的找到需要寻找的元素~方便了很多。

欢迎沟通交流~HTML5学堂