Less 变量插值

描述

变量插值是评估包含一个或多个变量的表达式或文字的过程，产生其中变量用其对应值替换的输出。变量也可以在其他地方使用，如选择器名称，属性名称，URL和@import语句。

下表详细说明了使用变量插值。

序号	变量用法与说明
1	选择器选择器可以引用任何变量，它是在编译时构建的。
2	URL 变量可用于保存URL。
3	Import 语句 import语句可以具有保存路径的变量。
4	属性变量可以由属性引用。

Less 选择器

描述

选择器可以引用任何变量，它是在编译时构建的。变量名称必须放在用@符号前缀的花括号（{}）内。

例子

下面的例子演示了在LESS文件中使用selector：

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS selectors</title>
   </head>

   <body>
      <h2>Welcome to CodingDict</h2>
      <div class = "div1">
         <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
      </div>

      <div class = "div2">
         <p>LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.</p>
      </div>

   </body>
</html>

接下来，创建文件style.less。

style.less

@selector: h2;

@{selector} {
  background: #2ECCFA;
}

您可以使用以下命令将style.less编译为style.css：

lessc style.less style.css

接下来执行上面的命令，它将自动创建style.css文件用下面的代码：

style.css

h2 {
  background: #2ECCFA;
}

输出

让我们执行以下步骤，看看上面的代码如何工作：

将上面的html代码保存在 less_variables_interpolation_selectors.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。

LESS Selectors

Less URL

描述

变量可用于保存URL。

例子

下面的示例演示了使用变量来保存LESS文件中的URL：

<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>LESS URLs</title>
</head>
<body>
<div class="myclass">
</div>
</body>
</html>

接下来，创建文件style.less。

style.less

@images: "http://www.CodingDict.cn";

.myclass {
  background : url("@{images}/less/images/less_variables/birds.jpg");
  width:800px;
  height:500px;
}

您可以使用以下命令将style.less编译为style.css：

lessc style.less style.css

接下来执行上面的命令，它将自动创建style.css文件用下面的代码：

style.css

.myclass {
  background: url("//www.CodingDict.cn/less/images/less_variables/birds.jpg");
  width: 800px;
  height: 500px;
}

输出

让我们执行以下步骤，看看上面的代码如何工作：

将上面的html代码保存在 less_variables_interpolation_url.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。

LESS URLs

Less Import语句

描述

import语句可以具有保存路径的变量。当你引用一个普通的父目录时，这是非常有用的。

例子

下面的示例演示了在import语句中使用变量：

<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>LESS Variables in Import Statements</title>
</head>
<body>
<div class="myclass">
<h2>Welcome to CodingDict</h2>
<p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</body>
</html>

接下来，创建文件style.less。

style.less

@path : "//www.codingdict.com/less";
@import "@{path}/external1.less";
.myclass{
  color : #A52A2A;
}

external1.less

.myclass{
  background: #C0C0C0;
}

您可以使用以下命令将style.less编译为style.css：

lessc style.less style.css

接下来执行上面的命令，它将自动创建style.css文件用下面的代码：

style.css

.myclass {
  background: #C0C0C0;
}
.myclass {
  color: #A52A2A;
}

输出

让我们执行以下步骤，看看上面的代码如何工作：

将上面的html代码保存在 less_variables_interpolation_import.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。

LESS Import Statements