变量插值

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

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

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

选择器

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

例子

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

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

   <body>
      <h2>Welcome to jsrun</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。

@selector: h2;

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

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

lessc style.less style.css

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

h2 {
  background: #2ECCFA;
}

输出

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

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

Welcome to jsrun
LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site. 
LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.

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。

@images: "http://www.jsrun.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文件用下面的代码：

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

输出

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

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

LESS URLs

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 jsrun</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。

@path : "//www.jsrun.cn/less";
@import "@{path}/external1.less";
.myclass{
 color : #A52A2A;
}
external1.less
.myclass{
background: #C0C0C0;
}

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

lessc style.less style.css

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

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

输出

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

将上面的html代码保存在less_variables_interpolation_import.html文件中。

在浏览器中打开此HTML文件，将显示如下输出。

Welcome to jsrun
LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.

变量插值属性

变量可以由属性引用。

选择器名插值

Less选择器名称中可以引用任何变量。如：

@head: h;
.@{head}2 {
  font-size: 16px;
}

属性名插值

Less 属性名称中可以引用任何变量。如：

@my-property: color;
.myclass {
  background-@{my-property}: #81F7D8;
}

URL插值

变量还可以用来保存 URL，并在 url() 中使用它。如：

@host: "http://www.waibo.wang/";
h2 {
  color: @color;
  background: url("@{host}img/bg.png");
}

import插值

import 语句中，可以使用保存路径的变量。如：

@host: "http://www.waibo.wang/";
@import "@{host}/reset.less";

媒体查询插值

如果你希望在 media query 中使用 Less 变量，你可以直接使用普通的变量方式。因为“~”后面的值是不被编译的，所以可以用作 media query 的参数。如：

@singleQuery: ~"(max-width: 480px)";
@media screen, @singleQuery { 
    div { 
      width:2000px; 
    } 
}

例子

下面的例子演示了在LESS文件中使用由属性引用的变量：

<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>LESS Variables Interpolation Properties</title>
</head>
<body>
<div class="myclass">
<h2>Welcome to jsrun</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。

@my-property: color;
.myclass {
  background-@{my-property}: #81F7D8;
}

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

lessc style.less style.css

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

.myclass {
  background-color: #81F7D8;
}

输出

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

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

Welcome to jsrun
LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.

变量 插值

变量插值

选择器

例子

输出

URL

例子

输出

Import语句

例子

输出

变量插值属性

选择器名插值

属性名插值

URL插值

import插值

媒体查询插值

例子

输出

选择支付方式：

变量插值