HTML5学堂-码匠 HTML5学堂

您当前位于:开发工具 ——> 快速开发CSS的利器 - less系列 变量与作用域

快速开发CSS的利器 - less系列 变量与作用域

2015/05/07 00:12:02 | 作者:HTML5学堂(码匠) | 分类:开发工具 | 关键词:快速开发,less,变量,作用域,

快速开发CSS的利器 - less 变量与作用域

HTML5学堂:less可以简化CSS的一些书写,并提供了很多的功能。在JavaScript中有变量和作用域,同样的,less给我们提供了变量和作用域这样的功能,这样可以方便我们进行样式的计算和书写了。

less变量与作用域

今天主要先来介绍less中的变量使用,之后会讲解变量的计算,最后则是介绍变量作用域问题。均是以实例来讲解的,一起来看我们今天的主要内容吧~

less变量的基本使用

在less当中可以定义变量,然后用变量作为某属性的属性值,从而通过改变一个变量的值,改变所有相应属性的属性值。这样就可以保证自己的一致性,并尽可能减少滚动代码来查找、复制、粘贴等繁琐的工作。

先来看一个案例,我们希望的显示效果是:

快速开发CSS的利器 - less 变量与作用域01

对应的html结构代码

  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="test2.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.         </div>    
  25.     </div>
  26. </body>
  27. </html>

对应的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.     dl {
  34.         padding: 10px 20px;
  35.         border-bottom: 1px dotted #ccc;
  36.         &