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

梦幻雪冰

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

 
 
 

日志

 
 

【转载】快速开发CSS的利器 - less 混入  

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

  下载LOFTER 我的照片书  |

快速开发CSS的利器 - less 混入

less 混入

混入,指的是在CSS代码当中再书写CSS代码(也就是样式中的样式),对于一些会在样式表中重复使用的样式规则,使用样式的嵌套方式进行书写。

简单的理解,混入是什么呢?比如在网页当中有多处的标题,一部分标题共同拥有一个特点,即超出显示为省略号。那么此时我们超出显示为省略号的代码是:

  1. .text-overflow {
  2.     display:block;/*内联对象需加*/
  3.     word-break:keep-all;/* 不换行 */
  4.     white-space:nowrap;/* 不换行 */
  5.     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
  6.     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
  7. }

如果这个样式出现在一个地方,那么我们可以直接将这段代码书写到某个标签样式当中,但是如果出现在多个地方,就很容易出现问题,在书写的时候就会变得很麻烦。为了便于这个操作,我们可以将一个样式放在另一个样式当中。如:

  1. .text-overflow {
  2.     display:block;/*内联对象需加*/
  3.     word-break:keep-all;/* 不换行 */
  4.     white-space:nowrap;/* 不换行 */
  5.     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
  6.     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
  7. }
  8. .arclist dd h2 {
  9.     height: 36px;
  10.     margin-bottom: 10px;
  11.     font-size: 30px;
  12.     line-height: 36px;
  13.     color: #39f;
  14.     .text-overflow;
  15. }
  16. .arclist2 dd h2 {
  17.     height: 30px;
  18.     margin-bottom: 10px;
  19.     font-size: 24px;
  20.     line-height: 30px;
  21.     .text-overflow;
  22. }

这时候我们就能很方便的完成一些重复样式规则的设置。

对于网页当中,必然存在着很多的相同样式,比如所有的dl列表中,dt中的a标签以及img标签的控制几乎是类似的,那么对于这种不适合提取出来为单独类名的相同样式,我们就可以在less当中利用混入的功能进行书写,从而减少在编写时的代码量,提升编写代码的速度。

less 混入的中型demo

最终效果图

快速开发CSS的利器 - less 混入 - 独行冰海 - 独行冰海

 

结构代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>快速开发CSS的利器 - 初识less - 独行冰海</title>
  6.     <link rel="stylesheet" href="reset.css">
  7.     <link type="text/less" rel="stylesheet/less" href="test.less" />
  8.     <script src="less.js"></script>
  9. </head>
  10. <body>
  11.     <div class="wrap clearfix">
  12.         <div class="arclist">    
  13.             <dl>
  14.                 <dt>
  15.                     <a href="http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120150501655582/" title="">
  16.                         <img src="images/images1.jpg" alt="" title="">
  17.                     </a>
  18.                 </dt>
  19.                 <dd>
  20.                     <h2><a href="http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120150501655582/" title="">独行冰海 ~讲述我自己的故事~ </a></h2>
  21.                     <p>白色,是我的世界的颜色,独特而隐逸。我的“自由”不单纯是不让别人决定我的人生,还是认识我的个性,维护我的个性,决定我生活目标的代名词;也从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。每一次倒下都要自己站起来,要比以前更加强大。对于人生的种种罪苦、灾难,不但不存临危苟免心理,反而应当奋力对抗。生活有其暧味的、阴沉的一面,称之为命运,但绝不低头屈服,不跌倒在这可怕的幻影前面,通过对命运进行英勇而骄傲的斗争去寻找出路,用斗争的壮伟照亮生活阴沉的一面。命运可以剥夺幸福和生命,却不能贬低精神,可以把我打倒,却绝不可能把我征服!</p>
  22.                 </dd>
  23.             </dl>
  24.             <dl>
  25.                 <dt>
  26.                     <a href="http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120147584048/" title="">
  27.                         <img src="images/images2.jpg" alt="" title="">
  28.                     </a>
  29.                 </dt>
  30.                 <dd>
  31.                     <h2><a href="http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120147584048/" title="">厚积薄发</a></h2>
  32.                     <p>一种只生长在中国最东边的竹子“毛竹”。那里的农民到处播种,每天精心培养。种子发芽,即使农民们几年一直精心照顾,在四年之间也只不过长了3cm。别的地方的人看到这种情景,摇着头表示完全不能理解。但是,竹子五年后以每天30cm的速度生长着。仅6周就可以达到15米的高度。瞬时间就可以变成郁郁葱葱的竹林。仅仅在4年间成长3cm的竹子在第五年开始暴风般的成长。看上去在这六周之内好像发生了不可思议的变化。</p>
  33.                 </dd>
  34.             </dl>
  35.         </div>
  36.         <div class="arclist2">
  37.             <dl>
  38.                 <dt>
  39.                     <a href="http://blog.163.com/hongshaoguoguo@126/blog/static/180469812015369395121/" title="">
  40.                         <img src="images/images4.jpg" alt="" title="">
  41.                     </a>
  42.                 </dt>
  43.                 <dd>
  44.                     <h2><a href="http://blog.163.com/hongshaoguoguo@126/blog/static/180469812015369395121/" title="">数码宝贝 新番</a></h2>
  45.                     <p>原本说的是,数码宝贝-新番在4月份上映,不过貌似已经跳票,问了一个朋友,说大概7月才能看到吧~画风变了,不过感觉也还好啦,毕竟数码宝贝和圣斗士、蜡笔小新,是自己童年到现在最喜欢的三部动漫作品~</p>
  46.                 </dd>
  47.             </dl>
  48.             <dl>
  49.                 <dt>
  50.                     <a href="http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120153693532381/" title="">
  51.                         <img src="images/images5.jpg" alt="" title="">
  52.                     </a>
  53.                 </dt>
  54.                 <dd>
  55.                     <h2><a href="http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120153693532381/" title="">圣斗士星矢:黄金魂 </a></h2>
  56.                     <p>经典热血动画圣斗士系列最新作《圣斗士星矢:黄金魂》再曝新视频,黄金圣斗士复活于北欧仙宫,2015年4月11日起全球免费直播。貌似艾奥里亚是男一号(狮子座)</p>
  57.                 </dd>
  58.             </dl>
  59.             <dl>
  60.                 <dt>
  61.                     <a href="http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201472115018108/" title="">
  62.                         <img src="images/images6.jpg" alt="" title="">
  63.                     </a>
  64.                 </dt>
  65.                 <dd>
  66.                     <h2><a href="http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201472115018108/" title="">昆虫总动员-法国</a></h2>
  67.                     <p>在一片宁静的丛林里,在人类的行迹之下,掩藏着一个生机勃勃、热闹非凡的昆虫世界。一只瓢虫遭遇丛林各色虫类追赶,又闯入红黑蚂蚁的战争现场,亲身见证一场昆虫界的“特洛伊攻城”。影片想象力天马行空,不断抛出新的昆虫物种及各色设计感丰富的道具,在银幕上走马观花,笨拙的蜘蛛、卖萌的瓢虫、精明的蚂蚁,轮番登场,教人目不暇接。整部影片没有对白,以3D形式呈现出昆虫王国的微观世界,动画与实景拍摄结合,创造与好莱坞动画趣味大有不同的法式动画大片。</p>
  68.                 </dd>
  69.             </dl>
  70.         </div>        
  71.     </div>
  72. </body>
  73. </html>

less文件中的CSS

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

plus:前面四个类就是用于混入的CSS样式。

结束~!

 

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

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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