Less变量详解

maiziedu · · 3368 次点击 · 开始浏览    置顶
这是一个创建于 的主题,其中的信息可能已经有所发展或是发生改变。

  普通的变量   Css默认不支持变量,当我们使用less之后就可以使用。   其定义方式是 @变量名:值 ,如下,我们定义一个变量green,设置一个颜色green,然后将网页背景设置为绿色:   @green: #801f77;   header {   background: @green;   }   注意:由于变量只能定义一次,实际上他们就是“常量”   作为选择器和属性名   使用时将变量以@{变量名}的方式使用,使用例子如下:   作为选择器和属性名的变量   @kuandu:width;   .@{kuandu}{   @{kuandu}:150px   }   注意:这里的变量即使选择器又是属性名,不能写错。   作为URL   使用时,使用””将变量的值括起来,使用时同样将变量以@{变量名}的方式使用。使用例子如下:   //作为URL的变量   @imgurl:"https://www.baidu.com/img/";   header{   background: @green url("@{imgurl}bdlogo.png");   height: 500px;   }   延迟加载   延迟加载:变量是延迟加载的,在使用前不一定要预先说明。   意思是指:在前面使用了这个变量,但没有定义,但可以在后面给他定义出来,不影响输出。   定义多个相同名称的变量时   在定义一个变量两次时,只会使用最后定义的变量,Less会从当前作用域向上搜索。这个行为类似于css的定义中始终使用最后定义的属性值。使用实例如下:   //定义多个相同名称的变量时   @var: 0;   .class {   @var: 1;   .brass {   @var: 2;   three: @var; //这是的值是3   @var: 3;   }   one: @var; //这是的值是1   }   文章来源:麦子学院   原文链接:http://www.maiziedu.com/wiki/css/variable/

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

3368 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传