• Home
  • home > webfront > style > less >

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

    Author：lmk Date：

    快速开发CSS的利器 - less 混入 less 混入混入，指的是在CSS代码当中再书写CSS代码（也就是样式中的样式），对于一些会在样式表中重复
    快速开发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样式。

    结束~！


    转载本站文章《快速开发CSS的利器 - less 混入》,
    请注明出处：https://www.zhoulujun.cn/html/webfront/style/less/2015_0718_137.html

    收藏
    上一篇：第一页
    下一篇：详解less
    延伸阅读：