Less導入

它是用於導入 LESS 或 CSS 文件的內容。

示例

下面的例子演示了使用導入 LESS 文件:

Less Importing

Example using Importing

LESS enables customizable, manageable and reusable style sheet for web site.

It allows reusing CSS code and writing LESS code with same semantics.

LESS supports creating cleaner, cross-browser friendly CSS faster and easier.

接下來,創建文件 myfile.less。

myfile.less

.myclass{
color: #FF8000;
}

.myclass1{
color: #5882FA;
}

接下來,創建文件 style.less。

style.less

@import "http://www.yiibai.com/less/myfile.less";
.myclass2
{
color: #FF0000;

這將從路徑  http://www.yiibai.com/less/myfile.less 導入 myfile.less 到 style.less 文件

你可以編譯 style.less 文件使用以下命令來生成 style.css 文件:

lessc style.less style.css

接着執行上面的命令,它會自動創建 style.css文件,下面的代碼:

style.css

.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
.myclass2 {
color: #FF0000;
}

輸出

讓我們來執行以下步驟,看看上面的代碼工作:

  • 保存上面的 html 代碼到 importing.html 文件。

  • 在瀏覽器中打開該HTML文件,得到如下輸出顯示。

Less導入