文章目录

变量
- 1. 概览
- 2. 变量插值
- 3. 用变量定义变量
- 4. 懒声明
- 5. 属性作为变量

变量

变量：定义一个常用值

1. 概览

在样式表中使用某个值数十次甚至数百次的情况并不少见，如下：

a,
.link {color: #428bca;
}
.widget {color: #fff;background: #428bca;
}

变量使得能够在某一处来控制这些值，这样会让我们的代码更易于维护，定义变量的方式非常简单，@xxxx 即可，即在字符串前加上 @ 符号来进行声明。

// 变量
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);// 用法
a,
.link {color: @link-color;
}
a:hover {color: @link-color-hover;
}
.widget {color: #fff;background: @link-color;
}

生成的结果如下：

a,
.link {color: #428bca;
}
a:hover {color: #3071a9;
}
.widget {color: #fff;background: #428bca;
}

2. 变量插值

上面的例子使用了变量来控制 CSS 规则中的值，除此之外，变量还可以在其他地方使用，例如选择器名称、属性名称、URL 和 @import 语句。

选择器

// 变量
@my-selector: banner;// 用法
.@{my-selector} {font-weight: bold;line-height: 40px;margin: 0 auto;
}

生成的结果如下：

.banner {font-weight: bold;line-height: 40px;margin: 0 auto;
}

urls

// 变量
@images: '../img';// 用法
body {color: #444;background: url('@{images}/white-sand.png');
}

生成的结果如下：

body {color: #444;background: url('../img/white-sand.png');
}

import 表达式

// 变量
@variables: './variables';// 用法
@import '@{variables}/index.less';

属性

@property: color;.widget {@{property}: #0ee;background-@{property}: #999;
}

生成的结果如下：

.widget {color: #0ee;background-color: #999;
}

3. 用变量定义变量

在 Less 中，您可以使用一个变量来定义另一个变量。

写法 1：

@primary: green;.section {@color: @primary;.element {color: @color;}
}

生成的结果如下：

.section .element {color: green;
}

写法 2：

@primary: green;.section {@color: primary;.element {color: @@color;}
}

生成的结果如下：

.section .element {color: green;
}

我个人觉得写法 1 更容易理解

4. 懒声明

变量不必非得在使用前声明，也就是说，在使用这个变量前，这个变量可以没有被声明，可以后置声明。

这跟 es6 前的 js 一样，用 var 声明的变量可以后置，但我个人觉得这样真的不好，代码混乱不说，还容易出错

下面均为有效的 less 代码

.lazy-eval {width: @var;
}@var: @a;
@a: 9%;

.lazy-eval {width: @var;@a: 9%;
}@var: @a;
@a: 100%;

上面两段代码都是有效的，且结果均如下：

.lazy-eval {width: 9%;
}

当同一个变量被定义多次时，使用变量，会从当前范围从下往上查找，将使用最后一个定义的变量，也就是后一个定义会覆盖前一个定义。这和 css 很类似，后一个属性会覆盖前一个。

例如：

@var: 0;
.class {@var: 1;.brass {@var: 2;width: @var;@var: 3;}width: @var;
}

生成的结果为：

.class {width: 1;
}
.class .brass {width: 3;
}

本质上，每个作用域范围都有一个“最终”值，浏览器中的属性也是如此，例如使用自定义属性的示例：

.header {--color: white;color: var(--color); /* 最终 color 将为 black */--color: black;
}

这意味着，Less 变量的行为与 CSS 非常相似。

5. 属性作为变量

可以直接使用 $propName 语法轻松地将属性视为变量。示例如下：

.widget {color: #efefef;background-color: $color;
}

这里使用 $color 作为变量，对应的值

生成的结果为：

.widget {color: #efefef;background-color: #efefef;
}

当然，与变量一样，属性变量在查找时，同样是按照最后一个定义会覆盖前面所有定义的原则。

.block {color: red;.inner {background-color: $color;}color: blue;
}

生成的结果为：

.block {color: red;color: blue;
}
.block .inner {background-color: blue;
}

快速搞定 Less 之 —— 变量相关推荐

一行代码快速搞定Flowable断点下载（上）
一行代码快速搞定Flowable断点下载(上) 之前我们大致讲了讲,到底怎么完全将disposable相关代码完全隐藏. 然后到了这里,可能有些杠精就会说了,你那个方式,我们不是完全不能拿到Flowa ...
快速搞定前端技术一面匹配大厂面试要求学习笔记
快速搞定前端技术一面匹配大厂面试要求学习笔记第1章课程介绍[说说面试的那些事儿] 本章会出几个面试题,分析每道题目设计的知识点,然后总结出一个完整的知识体系.让我们开始 "题目-> ...
AVL Cruise从入门到秃头-如何快速搞定一个双电机四驱仿真模型（2）
学海无涯,回头是岸目录写在前面模型改造结语写在前面本文由"王浮生不怕生"原创,拒绝任何形式的抄袭及转载! 原文链接:https://mp.weixin.qq.com/s ...
教你一招超级简单的方法快速搞定grub.conf文件的丢失及损坏
教你一招超级简单的方法快速搞定grub.conf文件的丢失及损坏实验环境: GRUB是大多数Linux系统默认使用的引导程序,当"/boot/grub/grub.conf"配置文 ...
一行代码快速搞定Flowable断点下载（下）
一行代码快速搞定Flowable断点下载(下) 其实这个主题对应的三篇文章真的真的非常难写,首先是感觉非常多人对于函数式编程不太熟悉,然后又有一些人对于kotlin不太熟悉.这就导致了,写这三篇文章的 ...
一行代码快速搞定Flowable断点下载（中）
一行代码快速搞定Flowable断点下载(中) 感觉上一篇家常聊了太多,这一篇就直接进入正题,首先来看一下,通过存储化以及方法拓展技术将mComposableDisposable的相关逻辑也从抽象Ac ...
白话经典算法系列之六快速排序快速搞定
快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用,因此很多软件公司的笔试面试,包括像腾讯,微软等知名IT公司都喜欢考这个 ...
怎么做95置信区间图_这种动态的OD图怎么做？简单3步快速搞定
之前在视频号中发过一个单车的出行数据可视化效果. 动态展示了某天单车不同时段的运行情况,这种动态的OD可视化效果是如何制作的呢?使用的是kepler.gl进行制作的,其实非常简单,3步即可快速搞定. ...
【转载】白话经典算法系列之六快速排序快速搞定
原文地址:http://blog.csdn.net/morewindows/article/details/6684558 快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经 ...

快速搞定 Less 之 —— 变量

文章目录

变量

1. 概览

2. 变量插值

3. 用变量定义变量

4. 懒声明

5. 属性作为变量

快速搞定 Less 之 —— 变量相关推荐

最新文章

热门文章