@body-bg
例として、より少ない変数を定義するブートストラップを使用しています。を定義するカラーテーマを作成しました@background
。2つを接着するには、次のようにします。
@body-bg: @background
今、私は色のテーマを切り替えることができるようにしたいと考えています. そのため、less の監視機能を使用して を変更しまし@background
たが、less はこれを @body-bg に伝達していないようで、実際にはブートストラップのデフォルトに切り替わります。
次のどちらもやりたくない
less.modifyVars({ '@body-bg': '#FFFF00' })
less.modifyVars({ '@background': '#FFFF00', '@body-bg': '@background' })
から定義される他の多くの変数があるため@background
です。
ここにいくつかのテストページがあります。
問題.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="problem.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js#!watch" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="less.modifyVars({ '@background': '#FF0000' })">Apple Style!</a>
<a href="#" onclick="less.modifyVars({ '@background': '#FFFF00' })">Banana Style!</a>
</body>
</html>
問題無し
@background: #FF0000;
@import "bootstrap/bootstrap.less";
@body-bg: @background;