Less生成多个CSS文件

时间:2017-03-02 06:44:09

标签: css less

我有一个less文件,要求stylesheet页面有scriptsingle。我已附上截图以了解更多详情。 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以便它不会波动?

0 个答案:

没有答案