变量（Variables）

您所在的位置：网站首页 › 定义变量的目的是什么 › 变量（Variables）

变量（Variables）

2024-07-13 04:02| 来源: 网络整理| 查看: 265

变量（Variables）

在单个位置控制常用值。

概述

在样式表中，同一个值重复出现几十次甚至几百次并不罕见：

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

通过变量，你可以从单个位置控制这些值，使代码更易于维护：

// 变量@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;}变量插值

上面的示例侧重于使用变量来控制 CSS 规则中的值，但它们也可以在其它地方使用，例如选择器名称、属性名称、URL 和 @import 语句。

选择器

v1.4.0

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

编译为：

.banner { font-weight: bold; line-height: 40px; margin: 0 auto;}URL// 变量@images: "/img";// 使用body { color: #444; background: url("@{images}/white-sand.png");}导入语句

v1.4.0

语法：@import "@{themes}/tidal-wave.less";

请注意，在 v2.0.0 之前，仅考虑在根或当前作用域中声明的变量，并且在查找变量时仅考虑当前文件和调用文件。

示例：

// 变量@themes: "//src/themes";// 使用@import "@{themes}/tidal-wave.less";属性

v1.6.0

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

编译为：

.widget { color: #0ee; background-color: #999;}变量引用变量

在 Less 中，你可以使用另一个变量定义变量的名称。

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

编译为：

.section .element { color: green;}懒加载

变量在使用之前不必声明。

有效的 Less 片段：

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

这也是有效的 Less：

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

都编译为：

.lazy-eval { width: 9%;}

当变量被定义两次时，从当前作用域向上搜索使用变量的最后一个定义。这类似于 CSS 本身，其中定义内的最后一个属性用于确定值。

例如：

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

编译为：

.class { one: 1;}.class .brass { three: 3;}

实际上，每个作用域都有一个“最终”值，类似于浏览器中的属性，例如使用自定义属性的示例：

.header { --color: white; color: var(--color); // 颜色为黑色 --color: black;}

这意味着，与其它 CSS 预处理语言不同，Less 变量的行为非常类似于 CSS。

将属性作为变量使用 (NEW!)

v3.0.0

你可以使用 $prop 语法轻松将属性视为变量。有时，这可以使你的代码更轻。

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

编译为：

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

请注意，与变量一样，Less 将选择当前/父级作用域中的最后一个属性作为“最终”值。

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

编译为：

.block { color: red; color: blue;}.block .inner { background-color: blue;}默认变量

我们有时会收到有关默认变量的请求-仅在未设置变量时设置变量的能力。不需要此功能，因为你可以通过在定义之后放置定义来轻松覆盖变量。

例如：

// library@base-color: green;@dark-color: darken(@base-color, 10%);// use of library@import "library.less";@base-color: red;

这很好用，因为有惰性加载-@base-color被覆盖，@dark-color是深红色。

【本文地址】

变量（Variables）

变量（Variables）

今日新闻

推荐新闻