注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】快速开发CSS的利器 - less 嵌套规则  

2015-04-23 22:54:23|  分类: CSS框架 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

快速开发CSS的利器 - 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. }

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

快速开发CSS的利器 - less 嵌套规则 - 独行冰海 - 独行冰海

 

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

  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. }

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

  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. }

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

结束~!

 

欢迎大家互相学习交流。独行冰海

  评论这张
 
阅读(32)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017