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

您当前位于：开发工具 ——> 快速开发CSS的利器 - less系列 变量与作用域
上一篇：SVN工具的使用与安装（下） 下一篇：快速开发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.         &: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. }

在这个案例当中，我们希望图像的阴影和a标签以及h2标签的文字颜色均是蓝色#39f的（之所以需要h2也是蓝色，在于我们将超出显示为省略号设置在了h2标签当中，如果仅仅设置a标签的颜色，那么多出来的省略号就成了黑色）。即便是颜色值发生变化，这三个颜色值也应当是保持一致的。这时无论我们书写代码还是更改需求时修改样式，都需要写三遍，很是麻烦。

此时，我们在less文件中（第25行的位置）定义一个变量——@bluecolor:#39f;之后，将所有使用到这个颜色的地方（第50、66、69行）均更换为这个变量。

  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. @bluecolor: #39f;
  26. .wrap {
  27.     width: 1020px;
  28.     margin: 0 auto;
  29. }
  30. .arclist {
  31.     float: left;
  32.     width: 600px;
  33.     background: rgba(227, 227, 227, 0.2);
  34.     dl {
  35.         padding: 10px 20px;
  36.         border-bottom: 1px dotted #ccc;
  37.         &:after {
  38.             .common-clearfloat;
  39.         }
  40.         
  41.         dt {    
  42.             float: left;
  43.             width: 180px;
  44.             height: 180px;
  45.             a {    
  46.                 .common-dta;
  47.                 border-radius: 5px;
  48.                 box-shadow: 0 0 0 2px @bluecolor;
  49.             }
  50.             img {
  51.                 .common-dtimg;    
  52.             }
  53.         }
  54.         dd {
  55.             float: left;
  56.             width: 360px;
  57.             height: 180px;
  58.             padding: 0 0 0 20px;            
  59.             h2 {
  60.                 height: 36px;
  61.                 margin-bottom: 10px;
  62.                 font-size: 30px;
  63.                 line-height: 36px;
  64.                 color: @bluecolor;
  65.                 .text-overflow;
  66.                 a {
  67.                     color: @bluecolor;
  68.                 }
  69.             }
  70.             p {
  71.                 overflow: hidden;
  72.                 height: 126px;
  73.                 font-size: 14px;
  74.                 line-height: 18px;
  75.             }
  76.         }
  77.     }
  78. }

这时，如果我们希望能够发生颜色的变化，只需要调整变量的值即可，如，将变量的值调整为#f39;

代码更改后为如下显示效果：

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

符合条件的变量为止。

欢迎沟通交流~HTML5学堂

变量的计算

除了上面提到的可以使用变量之外，我们还可以根据变量进行相关计算。如：我们定义了三个块，定义了一个变量@bacColor，进行了颜色值的存储，之后由于每个块的背景颜色不同，因此直接使用变量进行计算。需要注意的是，变量与操作符（+、-符号）之间需要使用空格进行分隔。对于代码中.common-div如果不明白的话，可以翻看前面的《快速开发CSS的利器-less混入》的日志。

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

代码实例：

结构代码

  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="con1">独行冰海 - 利利</div>
  12.     <div class="con2">梦幻雪冰 - 陈能堡</div>
  13.     <div class="con3">尹小芃槑 - 尹鹏</div>
  14. </body>
  15. </html>

less文件代码

  1. @bacColor: #ccf;
  2. .common-div {
  3.     width: 200px;
  4.     height: 200px;
  5.     line-height: 200px;
  6.     text-align: center;
  7.     font-size: 20px;
  8.     font-weight: bold;
  9.     border: 1px solid #000;
  10. }
  11. .con1 {
  12.     .common-div;
  13.     background: @bacColor;
  14. }
  15. .con2 {
  16.     .common-div;
  17.     background: @bacColor - #003 + #300;
  18. }
  19. .con3 {
  20.     .common-div;
  21.     background: @bacColor - #003 + #030;
  22. }

对于颜色的变量，我们可以进行计算，那么对于一些宽高、字体大小等以px为单位的属性，可否使用变量进行计算呢？于是我进行了一下尝试。将less代码调整成了如下内容：

  1. @fontSize: 16px;
  2. .common-div {
  3.     width: 200px;
  4.     height: 200px;
  5.     line-height: 200px;
  6.     text-align: center;
  7.     font-weight: bold;
  8.     border: 1px solid #000;
  9. }
  10. .con1 {
  11.     .common-div;
  12.     font-size: @fontSize;
  13. }
  14. .con2 {
  15.     .common-div;
  16.     font-size: @fontSize + 4px;
  17. }
  18. .con3 {
  19.     .common-div;
  20.     font-size: @fontSize - 4px;
  21. }

显示的效果如人所意，三个块中的文字大小分别以16px、20px和12px进行了显示。

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

变量作用域

学过JS的同学肯定都知道，存在变量作用域问题，对于我们的less中的CSS代码，既然已经存在了变量，那必然也会有所谓的变量作用域的问题。看如下demo：

  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="con">
  12.         独行冰海 -
  13.         <p>利利</p>
  14.     </div>
  15. </body>
  16. </html>

less文件中的代码：

  1. @fontSize: 16px;
  2. .con {
  3.     @fontSize: 20px;
  4.     width: 200px;
  5.     height: 200px;
  6.     text-align: center;
  7.     font-weight: bold;
  8.     border: 1px solid #000;
  9.     p {
  10.         font-size: @fontSize;
  11.     }
  12. }

显示效果：

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

在p元素上面，出现了两个fontSize的变量，那么和JS寻找变量的方式是一样的，就近原则，一级一级往上翻，直到翻到需要的变量为止。

最后来总结一下我们的知识内容：

1、对于一些值，我们可以如同JS一样，设置成变量，然后通过变量的操作进行所有符合条件代码的统一控制。

2、less中的CSS变量是可以进行运算的，而且不需要进行额外的处理（即不需要去掉px或者转换为字符串等），直接使用最基本的CSS样式书写和运算即可。

3、也存在所谓的“变量作用域”，其基本原理等同于JS的作用域，由自身开始，不断向其父级进行变量的查找，直到查找到符合条件的变量为止。

欢迎沟通交流~HTML5学堂

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

HTML5学堂

原创前端技术分享

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

原创视频课程

用心打造精品课程

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

小程序-决胜前端

前端面试题宝库

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

HTML5布局之路

非传统模式讲解前端

上一篇：SVN工具的使用与安装（下） 下一篇：快速开发CSS的利器 - less系列 参数混入与运算