我有一个less
文件,要求stylesheet
页面有script
和single
。我已附上截图以了解更多详情。
Screenshot
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="JS/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="JS/bootstrap.js" type="text/javascript"></script>
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="JS/jquery-1.7.2.min.js"></script>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="icon" href="Images/favicon.ico" />
<link rel="stylesheet/less" type="text/css" href="css/CubeCss/CubeMetropolis.less" />
<script src="JS/less.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if (document.getElementById("SelectedTheme").value == 'Office2010Black') {
less.modifyVars
({
'@baseColor': "#828282",
'@baseActiveColor': "#f2f5f8",
'@baseBg': "#f2f5f8"
});
}
if (document.getElementById("SelectedTheme").value == 'Youthful') {
less.modifyVars
({
'@baseColor': "#009688",
'@baseActiveColor': "#68d2c8",
'@baseBg': "#ecfffd"
});
}
else if (document.getElementById("SelectedTheme").value == 'Metropolis') {
less.modifyVars({
'@baseColor': "#EA9B41",
'@baseActiveColor': "#ffa400",
'@baseBg': "#fff1d9"
});
}
else if (document.getElementById("SelectedTheme").value == 'PlasticBlue') {
less.modifyVars({
'@baseColor': "#168ED7",
'@baseActiveColor': "#52beff",
'@baseBg': "#daf1ff"
});
}
else if (document.getElementById("SelectedTheme").value == 'RedWine') {
less.modifyVars({
'@baseColor': "#ec4b4b",
'@baseActiveColor': "#d26469",
'@baseBg': "#f9e7e7"
});
}
else if (document.getElementById("SelectedTheme").value == 'Office2003Olive') {
less.modifyVars({
'@baseColor': "#8da02a",
'@baseActiveColor': "#cfe465",
'@baseBg': "#f3f7e1"
});
}
});
</script>
</head>
我需要帮助在加载页面之前指定变量值,现在它首先波动并显示默认颜色(即黑色)然后更改为主题选择颜色。
我的CSS代码:
@baseColor:~'';
.dxpnl-btnSelected.dxpnl-btnPressed .dxWeb_pnlExpandArrowTop_Metropolis
{
background-color: @baseColor;
}
应该在哪里使用.modifyVars
以便它不会波动?