媒体查询较少使用变量-需要全局变量

Question

我正在寻找一个解决方案，我在全球范围内定义1个变量，然后在媒体查询中覆盖它-而不将整个代码放在其中(如媒体查询中的LESS CSS设置变量?)。

我是这么想的(定义):

@media (min-width: 768px) {
     @BWInputHeight: 40px;
}
@media (max-width: 768px) {
    //responsive screens
    @BWInputHeight: 20px;
}

像这样使用:

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

这里的问题是，"@BWInputHeight"是一个未声明的变量。如何使用LESS解决这个问题?

Answer 1

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

@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

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

注意:根据这个堆栈溢出线程，无点和less.js都应该是99%兼容的，因此我给出了这个答案。如果这对你不起作用，我很乐意把这个答案删除。