Less 變量插值屬性

2020-09-01 17:32 更新

描述

變量可以由屬性引用。

選擇器名插值

 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 的參數(shù)。如： 

@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 W3Cschool</h2>
<p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</body>
</html>

接下來，創(chuàng)建文件style.less。

style.less

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

您可以使用以下命令將style.less編譯為style.css：

lessc style.less style.css

接下來執(zhí)行上面的命令，它將自動創(chuàng)建style.css文件用下面的代碼：

style.css

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

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

  • 將上面的html代碼保存在less_variables_interpolation_properties.html文件中。

  • 在瀏覽器中打開此HTML文件，將顯示如下輸出。

LESS Variables Interpolation Properties


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號