如何引用asp.net webforms中的LESS文件？

我正在研究一個asp.net webforms C＃項目。我創建了一個LESS文件並進行了編譯。當我在aspx文件頭部分中使用它作爲CSS的一部分時，LESS文件中的類無法識別。我在「（Property）：（Value）」聲明「消息中看到冒號（:)之前的屬性名稱丟失。如何引用asp.net webforms中的LESS文件？

我LESS文件，TreeviewStyle.less：

split-into-two{ 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
    -webkit-column-gap: 50px; 
    column-gap: 50px; 
    -moz-column-gap: 50px; 
} 

body { 
}

我的aspx文件

<head runat="server"> 
<title></title> 

<link href="TreeviewStyle.css" rel="stylesheet" /> 
<style type="text/css"> 

    div > ul { 
     .split-into-two; 
    } 
</style> 
</head>

來源

2016-10-10 Massey

是不是LESS文件被編譯成一個.css文件然後你引用它？編輯：我沒有錯，官方[網站]（http://lesscss.org/）說，它確實編譯 –

編輯：OP的評論後，這裏就是我的回答：

div > ul { 
    .split-into-two; 
}

這語法無效。我認爲你試圖設置.split-into-two類到嵌套在div中的每個ul元素，但是你不能通過css來完成。你要麼必須手動將類每ul在你的模板，使用jQuery（或東西）類同做到這一點從JavaScript代碼，或修改您的更少文件來得到這樣的結果：

div > ul, .split-into-two{ 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
    -webkit-column-gap: 50px; 
    column-gap: 50px; 
    -moz-column-gap: 50px; 
}

保留舊部分爲了一致性：

您無法直接引用.less文件。

首先，你必須使用lessc命令行工具來編譯：

$ lessc TreeviewStyle.less TreeviewStyle.css

然後，你改變你的.apsx文件，包括編譯的css文件：

<link href="TreeviewStyle.css" rel="stylesheet" />

Here是資源。請下次再做一個更徹底的研究。

來源

2016-10-10 20:00:43

其實我已經編譯成TreeviewStyle.css並按照你所解釋的那樣引用它。我錯誤地發佈了錯誤的代碼。仍然我得到了相同的錯誤 – Massey

好吧，我修改了我的答案，現在看看。 –

嗨Jakub，我已經添加了jQuery代碼來將類添加到UL元素。仍然不適用於TreeviewStyle.css。然而，當我在aspx頁面中添加.split-into-two和所有CSS值時，它就可以工作。謝謝 – Massey

如何引用asp.net webforms中的LESS文件？

回答

相關問題