動態載入LESS 規則
預先存在的限制
最初必須載入LESS 樣式表在less.js 腳本之前。這是因為腳本在渲染之前解析和解釋 LESS 樣式。顛倒此順序將導致沒有樣式解釋。
動態載入解決方案
less.js 1.0.31 版本引進了 less.refreshStyles() 方法。此方法重新編譯
使用範例
要在頁載後動態載入LESS 規則，請依照下列步驟操作：
更新了測試案例
以下更新的程式碼範例示範了動態載入過程：
<code class="html"><script src="http://lesscss.googlecode.com/files/less-1.0.31.min.js"></script>
<link rel="stylesheet/less" href="/static/less/dynamic.less" id="abc123"/>
<script>
console.log("refreshing styles...");
less.refreshStyles();
console.log("refreshed...");
</script></code>LESS 樣式在表
<code class="less">@primary_color: green;
#container {
background: @primary_color;
border-radius: 5px;
div {
color: red;
}
}</code>透過呼叫less.refreshStyles( ) 方法中，
以上是如何在頁面載入後動態載入LESS規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
