- Less.js Variable Interpolation
- HTML实现
- CSS实现
- CSS实现
- HTML实现
- CSS实现
- CSS实现
- CSS实现
Less.js Variable Interpolation
Less.js 是一个简单的 CSS 预处理器，有助于为网站创建可管理、可定制和可重用的样式表。这种动态样式表语言为 CSS 提供了更多功能。 LESS 提供跨浏览器的互操作性。一种称为 CSS 预处理器的编程语言用于增强和编译 CSS，以便 Web 浏览器可以使用它。它也是一种 CSS 语言扩展，提供变量、函数、混合和操作等功能，让我们可以创建动态 CSS，同时保持向后兼容性。
所谓的 LESS 变量控制着特定区域中使用的公共值，并且可以在代码定义内的任何地方使用。 LESS 可以与这些变量一起使用，以更改整个代码中的某个值。当我们需要更改 CSS 代码中的某个值时，使用变量会变得更容易，否则这可能很困难。
Less 中的变量通常用于存储值，并且在 less 代码中重复使用。但是，不仅值而且不同性质的属性都被插入变量并同样使用。有四个地方可以使用变量：
选择器的名称：我们可以将选择器的名称存储在变量中，并在 CSS 规则之前使用它们。
语法：
@var: sel;.@{var} {
...
}
URL：我们还可以将整个或部分路径/目录存储在变量中。
语法：
@var: "URL_name"sel{
property: url("@{var}")
}
导入语句：我们还可以将整个或部分路径/目录存储在变量中，以便从该位置导入文件。
语法：
@var: "URL_name"@import "@{var}/...";
属性：和选择器一样，我们也可以将属性的名称存储在变量中，我们可以重复使用它们。
语法：
@var: property_name;selector {
@{var}: value;}
要了解如何将 LESS 代码编译成 CSS 代码，请打开它。
示例 1：下面的示例显示了选择器的名称和 URL 中变量的插值。
HTML实现
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js Variable Interpolation</b></h3>
<div class="container">
</div>
</body>
</html>
styles.less:
CSS实现
@body-bg-color: #eeeeee;
@text-color: rgb(0, 200, 100);
@container-bg: rgb(220, 43, 55);
@image: "1.png";
@var: container;
body {
background: @body-bg-color;
}
.@{var}{
height:200px;
width: 450px;
background: url("@{image}");
}
1.png:
现在，要将上面的 LESS 代码编译为 CSS 代码，请运行以下命令：
lessc styles.less styles.css
编译后的CSS文件变成：
样式.css：
CSS实现
body {
background: #eeeeee;
}
.container {
height: 200px;
width: 450px;
background: url("1.png");
}
输出：
示例 2：下面的示例显示了 Import 语句和属性中变量的插值。
HTML实现
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js Variable Interpolation</b></h3>
<div class="container">
<p class="text">GeeksforGeeks</p>
</div>
</body>
</html>
无风格：
CSS实现
@var: "test.less";
@import "@{var}";
test.less：这是导入的 less 文件。
CSS实现
@body-bg-color: #eeeeee;
@text-color: rgb(0, 200, 100);
@container-bg: rgb(220, 43, 55);
@var: color;
body {
background: @body-bg-color;
}
.container{
height:200px;
width: 400px;
background-@{var}: (#00821e);
}
.text {
padding: 70px 0px 0px 95px;
@{var} :yellow;
font-size: 2rem;
}
现在，要将上面的 LESS 代码编译为 CSS 代码，请运行以下命令：
lessc style.less style.css
编译后的CSS文件变成：
样式.css:
CSS实现
body {
background: #eeeeee;
}
.container {
height: 200px;
width: 400px;
background-color: #00821e;
}
.text {
padding: 70px 0px 0px 95px;
color: yellow;
font-size: 2rem;
}
输出：
参考：https://lesscss.org/features/#variables-feature-variable-interpolation
注：本文由VeryToolz翻译自 Less.js Variable Interpolation ，非经特殊声明，文中代码和图片版权归原作者 priyanshuchatterjee01所有，本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。