@import指令用于導(dǎo)入文件到代碼。它散布Less代碼在不同的文件,并可以非常方便地維護(hù)代碼的結(jié)構(gòu)??梢园?@import 語(yǔ)句放在代碼的任何位置。
例如,你可以使用@import 關(guān)鍵字 @import“file_name.less”導(dǎo)入文件。
文件擴(kuò)展名
您可以使用@import根據(jù)不同的文件擴(kuò)展名,如語(yǔ)句:
-
如果使用 .css 擴(kuò)展,那么它將被視為 CSS 和 @import 聲明導(dǎo)入保持原樣。
-
如果它包含任何其他擴(kuò)展名,那么將被視為L(zhǎng)ESS 并將其導(dǎo)入。
-
如果不是 .less 擴(kuò)展,那么它會(huì)追加,包括導(dǎo)入作為 less 文件。
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
示例
下面的例子演示了如何在 SCSS 文件中使用變量:
<!doctype html>
<head>
<title>Import Directives</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h2>Example of Import Directives</h2>
<p class="myline">Welcome to Yiibai Tutorials...</p>
</body>
</html>
接下來(lái),創(chuàng)建文件 import_dir.less。
import_dir.less
.myline {
font-size: 20px;
}
接下來(lái),創(chuàng)建文件style.less。
style.less
@import "http://www.yiibai.com/less/import_dir.less";
.myline {
color:#FF0000;
}
你可以編譯style.less使用下面的命令來(lái)生成 style.css 文件:
lessc style.less style.css
接著執(zhí)行上面的命令,它會(huì)自動(dòng)創(chuàng)建 style.css 文件,下面的代碼:
style.css
.myline {
font-size: 20px;
}
.myline {
color: #FF0000;
}
輸出結(jié)果
讓我們來(lái)執(zhí)行以下步驟,看看上面的代碼工作: