Css 带有变量的less中的媒体查询需要全局变量

我正在寻找一个解决方案，在这个解决方案中，我全局定义一个变量，然后在媒体查询中覆盖它，而不将整个代码放入其中（如）

我是这样想的（定义）：

这样使用它：

.dataTables_filter input {
    .form-control;
    max-width: 135px;
    display: inline-block;
    height: @BWInputHeight;
    padding: 1px 6px;
    margin-right: 15px;
}

---

这里的问题是，“@BWInputHeight”是一个未声明的变量。如何用更少的资源解决这个问题？

您可以通过为每个属性和屏幕宽度使用列表数组来实现这一点（如下面的示例）：

-修改输出区域宽度以查看差异，并单击CSS选项卡中的眼睛图标以查看已编译的CSS

---

注意：根据这一点，dotless和less.js应该99%兼容，因此我给出了这个答案。如果这对您不起作用，我很乐意删除此答案。

顺便说一下，我使用dotleShow如何使用列表数组，如？单击CSS选项卡中的eye图标以查看编译后的输出。或者这正是你不想做的？是的，这不是我想要的。我需要像media（minwidth:768px）{bwinputhweight:40px；//这里我只定义变量，它将根据分辨率使用，所以我有一个例子。dataTables_filter input{}只在一个地方，因为如果我添加一些新属性，我可能忘记在不同的媒体查询中添加它}谢谢你的帮助：）我已经更新了同一支笔，检查这是否更接近：）哦，对不起，我没有注意到。这是less.js。我从未尝试过Visual Studio。再次感谢您的帮助。我使用dotless 1.4.0.0，并在vs nuget manager上安装了Less.js 1.5.1，但只要我执行此代码，就没有“.dataTables\u filter input”类-因此从我的角度来看，这意味着呈现该代码时存在一些问题？！。我该怎么做才能找到那个错误，在使用less.js之前可能还有一些东西需要配置？！对不起，伙计，我也没有线索。我正在尝试使用less.js 1.5.1，它似乎工作正常。我忽略了“@”符号，这是以前代码中不同检查器的输出：“@bwinputhweight:'200px'，'40px'；最小宽度：~”（最小宽度：768px）”；最大宽度：~“（最大宽度：768px）”；数据表\过滤器输入{最大宽度：135px；显示：内联块；媒体@min-width{height:e（extract（@BWInputHeight，1））}媒体@max-width{height:e（extract（@BWInputHeight，2））}填充：1px 6px；右边距：15px；}”但是当前代码没有显示任何输出…现在我改为WebEssentials 2013，它可以工作：）太好了。很高兴能提供一些帮助：）

.dataTables_filter input {
    .form-control;
    max-width: 135px;
    display: inline-block;
    height: @BWInputHeight;
    padding: 1px 6px;
    margin-right: 15px;
}

@BWInputHeight: '20px','40px','60px'; // Height of the button for min-width=320 and min-width=768 respectively
@minwidths: '320px','768px','1024px'; // The widths for which you need the media queries to be created

.loop-column(@index) when (@index > 0) { // Loop to iterate through each value in @minwidths and form the corresponding output
    .loop-column(@index - 1);
    @width:  extract(@minwidths, @index); // extracts width based on array index
    @media (min-width: e(@width)){
          .dataTables_filter input{
            height: e(extract(@BWInputHeight,@index)); // extracts button height for the corresponding screen width
            max-width: 135px;
            display: inline-block;
            padding: 1px 6px;
            margin-right: 15px;          
          }
    }
}

.loop-column(length(@minwidths)); // calling the function