LESS - Import 选项 Inline 关键字
描述
@import (inline) 语句会将您的 CSS 复制到输出 CSS 文件中而不进行处理。当 CSS 文件与 LESS 不兼容时，这很有用。虽然 LESS 支持大多数标准 CSS，但有些地方不支持注释，如果不修改 CSS，它将不支持所有已知的 CSS 技巧。即使 @import (inline) 不会处理 CSS，它也会确保您的所有 CSS 都位于一个文件中。这是在 1.5.0 版中发布的。
示例
以下示例演示了在 LESS 文件中使用 reference 关键字 −
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>Import Option Inline</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p>LESS is a CSS pre-processor that enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
接下来，创建 style.less 文件。
style.less
@import (inline) "http://www.tutorialspoint.com/less/import_inline.css";
p {
color:red;
}
以下代码将从路径 https://www.tutorialspoint.com/less/import_inline.css 将 import_inline.css 文件导入到 style.less 中，代码如下 −
import_inline.css
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
您可以使用以下命令将 style.less 编译为 style.css −
lessc style.less style.css
执行上述命令;它将使用以下代码自动创建 style.css 文件 −
style.css
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
p {
color: red;
}
输出
按照以下步骤查看上述代码的工作原理 −
将上述 html 代码保存在 import_options_inline.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。
如果您尝试在 style.less 中的 p 标签内使用 .style 类，它将引发 undefined error(未定义的错误)。
less_import_options.html
