前端技术分享-码匠 极客编程技术分享

您当前位于：开发工具 ——> 快速开发CSS的利器 - less系列 less的混入
上一篇：快速开发CSS的利器 - less系列 初识less，less是什么 下一篇：SVN工具的使用与安装（上）

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

2015/05/02 21:05:27 | 作者：HTML5学堂（码匠） | 分类：开发工具 | 关键词：快速开发,less,混入

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

HTML5学堂：快速开发CSS的利器 - less 混入。 混入，指的是在CSS代码当中再书写CSS代码（也就是样式中的样式），对于一些会在样式表中重复使用的样式规则，使用样式的嵌套方式进行书写。 简单的理解，混入是什么呢？比如在网页当中有多处的标题，一部分标题共同拥有一个特点，即超出显示为省略号。

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当中利用混入的功能进行书写，从而减少在编写时的代码量，提升编写代码的速度。

欢迎沟通交流~HTML5学堂

less 混入的中型demo

最终效果图

HTML5学堂 快速开发CSS的利器 - less 混入 h5course

结构代码

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

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：快速开发CSS的利器 - less系列 初识less，less是什么 下一篇：SVN工具的使用与安装（上）