我正在尝试为CSS创建生成的间距类。 我有一些嵌入式循环可以创建此循环，而在外循环内部，可以定义媒体查询。我有一组内部样式正在循环浏览，并放置在3个媒体查询的每个内部。
由于某种原因，当媒体查询被循环通过时，它会添加前一个变量并为每个媒体查询附加“和”，因此我的页面如下所示：
@media (max-width: 991px) {...}
@media (max-width: 991px) and (max-width: 767px) {...}
@media (max-width: 991px) and (max-width: 767px) and (max-width: 480px) {...}
何时应如下所示：
@media (max-width: 991px) {...}
@media (max-width: 767px) {...}
@media (max-width: 480px) {...}
我添加了其他CSS属性来代替@media，以查看是否是@media的问题，但似乎在我的循环中仍然存在。 （仅供参考，我使用的是Less版本 3.0 ）
较少
@screen-xs-min: 480px;
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-xl-min: 1340px;
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@directionlist: l, b, r, t;
@directions: left, bottom, right, top;
@spacingtype: padding, margin;
@sapcingtypeabv: p, m;
@responsivevars: screen-xs-min, screen-xs-max, screen-sm-max;
@responsivevarsabv: xs, sm, md;
@maxg: 3;
.g-loop (@g) when (@g > 0) {
@responsive: extract(@responsivevars, @g);
@responsiveabv: extract(@responsivevarsabv, @g);
@media (max-width: @@responsive) {
@maxh: 2;
.h-loop (@h) when (@h > 0) {
@maxi: 50;
.i-loop (@i) when (@i > -1) {
@maxj: 4;
.j-loop (@j) when (@j > 0) {
@direction: extract(@directionlist, @j);
@directionname: extract(@directions, @j);
@type: extract(@spacingtype, @h);
@typeabv: extract(@sapcingtypeabv, @h);
.@{typeabv}-@{responsiveabv}-@{direction}-@{i} {
@{type}-@{directionname}: @i*1px !important;
}
.j-loop(@j - 1);
}
.j-loop (0) {}
.j-loop(@maxj);
.i-loop(@i - 5);
}
.i-loop (0) {}
.i-loop(@maxi);
.h-loop(@h - 1);
}
.h-loop (0) {}
.h-loop(@maxh);
.g-loop(@g - 1);
} //Closing Media Query
}
.g-loop (0) {}
.g-loop(@maxg);
您可以使用 LESS Tester 查看编译结果。
生成的CSS
@media (max-width: 991px) {
.m-md-t-50 {
margin-top: 50px !important;
}
.m-md-r-50 {
margin-right: 50px !important;
}
.m-md-b-50 {
margin-bottom: 50px !important;
}
.m-md-l-50 {
margin-left: 50px !important;
}
.m-md-t-45 {
margin-top: 45px !important;
}
.m-md-r-45 {
margin-right: 45px !important;
}
.m-md-b-45 {
margin-bottom: 45px !important;
}
.m-md-l-45 {
margin-left: 45px !important;
}
.m-md-t-40 {
margin-top: 40px !important;
}
.m-md-r-40 {
margin-right: 40px !important;
}
.m-md-b-40 {
margin-bottom: 40px !important;
}
.m-md-l-40 {
margin-left: 40px !important;
}
.m-md-t-35 {
margin-top: 35px !important;
}
.m-md-r-35 {
margin-right: 35px !important;
}
.m-md-b-35 {
margin-bottom: 35px !important;
}
.m-md-l-35 {
margin-left: 35px !important;
}
.m-md-t-30 {
margin-top: 30px !important;
}
.m-md-r-30 {
margin-right: 30px !important;
}
.m-md-b-30 {
margin-bottom: 30px !important;
}
.m-md-l-30 {
margin-left: 30px !important;
}
.m-md-t-25 {
margin-top: 25px !important;
}
.m-md-r-25 {
margin-right: 25px !important;
}
.m-md-b-25 {
margin-bottom: 25px !important;
}
.m-md-l-25 {
margin-left: 25px !important;
}
.m-md-t-20 {
margin-top: 20px !important;
}
.m-md-r-20 {
margin-right: 20px !important;
}
.m-md-b-20 {
margin-bottom: 20px !important;
}
.m-md-l-20 {
margin-left: 20px !important;
}
.m-md-t-15 {
margin-top: 15px !important;
}
.m-md-r-15 {
margin-right: 15px !important;
}
.m-md-b-15 {
margin-bottom: 15px !important;
}
.m-md-l-15 {
margin-left: 15px !important;
}
.m-md-t-10 {
margin-top: 10px !important;
}
.m-md-r-10 {
margin-right: 10px !important;
}
.m-md-b-10 {
margin-bottom: 10px !important;
}
.m-md-l-10 {
margin-left: 10px !important;
}
.m-md-t-5 {
margin-top: 5px !important;
}
.m-md-r-5 {
margin-right: 5px !important;
}
.m-md-b-5 {
margin-bottom: 5px !important;
}
.m-md-l-5 {
margin-left: 5px !important;
}
.m-md-t-0 {
margin-top: 0px !important;
}
.m-md-r-0 {
margin-right: 0px !important;
}
.m-md-b-0 {
margin-bottom: 0px !important;
}
.m-md-l-0 {
margin-left: 0px !important;
}
.p-md-t-50 {
padding-top: 50px !important;
}
.p-md-r-50 {
padding-right: 50px !important;
}
.p-md-b-50 {
padding-bottom: 50px !important;
}
.p-md-l-50 {
padding-left: 50px !important;
}
.p-md-t-45 {
padding-top: 45px !important;
}
.p-md-r-45 {
padding-right: 45px !important;
}
.p-md-b-45 {
padding-bottom: 45px !important;
}
.p-md-l-45 {
padding-left: 45px !important;
}
.p-md-t-40 {
padding-top: 40px !important;
}
.p-md-r-40 {
padding-right: 40px !important;
}
.p-md-b-40 {
padding-bottom: 40px !important;
}
.p-md-l-40 {
padding-left: 40px !important;
}
.p-md-t-35 {
padding-top: 35px !important;
}
.p-md-r-35 {
padding-right: 35px !important;
}
.p-md-b-35 {
padding-bottom: 35px !important;
}
.p-md-l-35 {
padding-left: 35px !important;
}
.p-md-t-30 {
padding-top: 30px !important;
}
.p-md-r-30 {
padding-right: 30px !important;
}
.p-md-b-30 {
padding-bottom: 30px !important;
}
.p-md-l-30 {
padding-left: 30px !important;
}
.p-md-t-25 {
padding-top: 25px !important;
}
.p-md-r-25 {
padding-right: 25px !important;
}
.p-md-b-25 {
padding-bottom: 25px !important;
}
.p-md-l-25 {
padding-left: 25px !important;
}
.p-md-t-20 {
padding-top: 20px !important;
}
.p-md-r-20 {
padding-right: 20px !important;
}
.p-md-b-20 {
padding-bottom: 20px !important;
}
.p-md-l-20 {
padding-left: 20px !important;
}
.p-md-t-15 {
padding-top: 15px !important;
}
.p-md-r-15 {
padding-right: 15px !important;
}
.p-md-b-15 {
padding-bottom: 15px !important;
}
.p-md-l-15 {
padding-left: 15px !important;
}
.p-md-t-10 {
padding-top: 10px !important;
}
.p-md-r-10 {
padding-right: 10px !important;
}
.p-md-b-10 {
padding-bottom: 10px !important;
}
.p-md-l-10 {
padding-left: 10px !important;
}
.p-md-t-5 {
padding-top: 5px !important;
}
.p-md-r-5 {
padding-right: 5px !important;
}
.p-md-b-5 {
padding-bottom: 5px !important;
}
.p-md-l-5 {
padding-left: 5px !important;
}
.p-md-t-0 {
padding-top: 0px !important;
}
.p-md-r-0 {
padding-right: 0px !important;
}
.p-md-b-0 {
padding-bottom: 0px !important;
}
.p-md-l-0 {
padding-left: 0px !important;
}
}
@media (max-width: 991px) and (max-width: 767px) {
.m-sm-t-50 {
margin-top: 50px !important;
}
.m-sm-r-50 {
margin-right: 50px !important;
}
.m-sm-b-50 {
margin-bottom: 50px !important;
}
.m-sm-l-50 {
margin-left: 50px !important;
}
.m-sm-t-45 {
margin-top: 45px !important;
}
.m-sm-r-45 {
margin-right: 45px !important;
}
.m-sm-b-45 {
margin-bottom: 45px !important;
}
.m-sm-l-45 {
margin-left: 45px !important;
}
.m-sm-t-40 {
margin-top: 40px !important;
}
.m-sm-r-40 {
margin-right: 40px !important;
}
.m-sm-b-40 {
margin-bottom: 40px !important;
}
.m-sm-l-40 {
margin-left: 40px !important;
}
.m-sm-t-35 {
margin-top: 35px !important;
}
.m-sm-r-35 {
margin-right: 35px !important;
}
.m-sm-b-35 {
margin-bottom: 35px !important;
}
.m-sm-l-35 {
margin-left: 35px !important;
}
.m-sm-t-30 {
margin-top: 30px !important;
}
.m-sm-r-30 {
margin-right: 30px !important;
}
.m-sm-b-30 {
margin-bottom: 30px !important;
}
.m-sm-l-30 {
margin-left: 30px !important;
}
.m-sm-t-25 {
margin-top: 25px !important;
}
.m-sm-r-25 {
margin-right: 25px !important;
}
.m-sm-b-25 {
margin-bottom: 25px !important;
}
.m-sm-l-25 {
margin-left: 25px !important;
}
.m-sm-t-20 {
margin-top: 20px !important;
}
.m-sm-r-20 {
margin-right: 20px !important;
}
.m-sm-b-20 {
margin-bottom: 20px !important;
}
.m-sm-l-20 {
margin-left: 20px !important;
}
.m-sm-t-15 {
margin-top: 15px !important;
}
.m-sm-r-15 {
margin-right: 15px !important;
}
.m-sm-b-15 {
margin-bottom: 15px !important;
}
.m-sm-l-15 {
margin-left: 15px !important;
}
.m-sm-t-10 {
margin-top: 10px !important;
}
.m-sm-r-10 {
margin-right: 10px !important;
}
.m-sm-b-10 {
margin-bottom: 10px !important;
}
.m-sm-l-10 {
margin-left: 10px !important;
}
.m-sm-t-5 {
margin-top: 5px !important;
}
.m-sm-r-5 {
margin-right: 5px !important;
}
.m-sm-b-5 {
margin-bottom: 5px !important;
}
.m-sm-l-5 {
margin-left: 5px !important;
}
.m-sm-t-0 {
margin-top: 0px !important;
}
.m-sm-r-0 {
margin-right: 0px !important;
}
.m-sm-b-0 {
margin-bottom: 0px !important;
}
.m-sm-l-0 {
margin-left: 0px !important;
}
.p-sm-t-50 {
padding-top: 50px !important;
}
.p-sm-r-50 {
padding-right: 50px !important;
}
.p-sm-b-50 {
padding-bottom: 50px !important;
}
.p-sm-l-50 {
padding-left: 50px !important;
}
.p-sm-t-45 {
padding-top: 45px !important;
}
.p-sm-r-45 {
padding-right: 45px !important;
}
.p-sm-b-45 {
padding-bottom: 45px !important;
}
.p-sm-l-45 {
padding-left: 45px !important;
}
.p-sm-t-40 {
padding-top: 40px !important;
}
.p-sm-r-40 {
padding-right: 40px !important;
}
.p-sm-b-40 {
padding-bottom: 40px !important;
}
.p-sm-l-40 {
padding-left: 40px !important;
}
.p-sm-t-35 {
padding-top: 35px !important;
}
.p-sm-r-35 {
padding-right: 35px !important;
}
.p-sm-b-35 {
padding-bottom: 35px !important;
}
.p-sm-l-35 {
padding-left: 35px !important;
}
.p-sm-t-30 {
padding-top: 30px !important;
}
.p-sm-r-30 {
padding-right: 30px !important;
}
.p-sm-b-30 {
padding-bottom: 30px !important;
}
.p-sm-l-30 {
padding-left: 30px !important;
}
.p-sm-t-25 {
padding-top: 25px !important;
}
.p-sm-r-25 {
padding-right: 25px !important;
}
.p-sm-b-25 {
padding-bottom: 25px !important;
}
.p-sm-l-25 {
padding-left: 25px !important;
}
.p-sm-t-20 {
padding-top: 20px !important;
}
.p-sm-r-20 {
padding-right: 20px !important;
}
.p-sm-b-20 {
padding-bottom: 20px !important;
}
.p-sm-l-20 {
padding-left: 20px !important;
}
.p-sm-t-15 {
padding-top: 15px !important;
}
.p-sm-r-15 {
padding-right: 15px !important;
}
.p-sm-b-15 {
padding-bottom: 15px !important;
}
.p-sm-l-15 {
padding-left: 15px !important;
}
.p-sm-t-10 {
padding-top: 10px !important;
}
.p-sm-r-10 {
padding-right: 10px !important;
}
.p-sm-b-10 {
padding-bottom: 10px !important;
}
.p-sm-l-10 {
padding-left: 10px !important;
}
.p-sm-t-5 {
padding-top: 5px !important;
}
.p-sm-r-5 {
padding-right: 5px !important;
}
.p-sm-b-5 {
padding-bottom: 5px !important;
}
.p-sm-l-5 {
padding-left: 5px !important;
}
.p-sm-t-0 {
padding-top: 0px !important;
}
.p-sm-r-0 {
padding-right: 0px !important;
}
.p-sm-b-0 {
padding-bottom: 0px !important;
}
.p-sm-l-0 {
padding-left: 0px !important;
}
}
@media (max-width: 991px) and (max-width: 767px) and (max-width: 480px) {
.m-xs-t-50 {
margin-top: 50px !important;
}
.m-xs-r-50 {
margin-right: 50px !important;
}
.m-xs-b-50 {
margin-bottom: 50px !important;
}
.m-xs-l-50 {
margin-left: 50px !important;
}
.m-xs-t-45 {
margin-top: 45px !important;
}
.m-xs-r-45 {
margin-right: 45px !important;
}
.m-xs-b-45 {
margin-bottom: 45px !important;
}
.m-xs-l-45 {
margin-left: 45px !important;
}
.m-xs-t-40 {
margin-top: 40px !important;
}
.m-xs-r-40 {
margin-right: 40px !important;
}
.m-xs-b-40 {
margin-bottom: 40px !important;
}
.m-xs-l-40 {
margin-left: 40px !important;
}
.m-xs-t-35 {
margin-top: 35px !important;
}
.m-xs-r-35 {
margin-right: 35px !important;
}
.m-xs-b-35 {
margin-bottom: 35px !important;
}
.m-xs-l-35 {
margin-left: 35px !important;
}
.m-xs-t-30 {
margin-top: 30px !important;
}
.m-xs-r-30 {
margin-right: 30px !important;
}
.m-xs-b-30 {
margin-bottom: 30px !important;
}
.m-xs-l-30 {
margin-left: 30px !important;
}
.m-xs-t-25 {
margin-top: 25px !important;
}
.m-xs-r-25 {
margin-right: 25px !important;
}
.m-xs-b-25 {
margin-bottom: 25px !important;
}
.m-xs-l-25 {
margin-left: 25px !important;
}
.m-xs-t-20 {
margin-top: 20px !important;
}
.m-xs-r-20 {
margin-right: 20px !important;
}
.m-xs-b-20 {
margin-bottom: 20px !important;
}
.m-xs-l-20 {
margin-left: 20px !important;
}
.m-xs-t-15 {
margin-top: 15px !important;
}
.m-xs-r-15 {
margin-right: 15px !important;
}
.m-xs-b-15 {
margin-bottom: 15px !important;
}
.m-xs-l-15 {
margin-left: 15px !important;
}
.m-xs-t-10 {
margin-top: 10px !important;
}
.m-xs-r-10 {
margin-right: 10px !important;
}
.m-xs-b-10 {
margin-bottom: 10px !important;
}
.m-xs-l-10 {
margin-left: 10px !important;
}
.m-xs-t-5 {
margin-top: 5px !important;
}
.m-xs-r-5 {
margin-right: 5px !important;
}
.m-xs-b-5 {
margin-bottom: 5px !important;
}
.m-xs-l-5 {
margin-left: 5px !important;
}
.m-xs-t-0 {
margin-top: 0px !important;
}
.m-xs-r-0 {
margin-right: 0px !important;
}
.m-xs-b-0 {
margin-bottom: 0px !important;
}
.m-xs-l-0 {
margin-left: 0px !important;
}
.p-xs-t-50 {
padding-top: 50px !important;
}
.p-xs-r-50 {
padding-right: 50px !important;
}
.p-xs-b-50 {
padding-bottom: 50px !important;
}
.p-xs-l-50 {
padding-left: 50px !important;
}
.p-xs-t-45 {
padding-top: 45px !important;
}
.p-xs-r-45 {
padding-right: 45px !important;
}
.p-xs-b-45 {
padding-bottom: 45px !important;
}
.p-xs-l-45 {
padding-left: 45px !important;
}
.p-xs-t-40 {
padding-top: 40px !important;
}
.p-xs-r-40 {
padding-right: 40px !important;
}
.p-xs-b-40 {
padding-bottom: 40px !important;
}
.p-xs-l-40 {
padding-left: 40px !important;
}
.p-xs-t-35 {
padding-top: 35px !important;
}
.p-xs-r-35 {
padding-right: 35px !important;
}
.p-xs-b-35 {
padding-bottom: 35px !important;
}
.p-xs-l-35 {
padding-left: 35px !important;
}
.p-xs-t-30 {
padding-top: 30px !important;
}
.p-xs-r-30 {
padding-right: 30px !important;
}
.p-xs-b-30 {
padding-bottom: 30px !important;
}
.p-xs-l-30 {
padding-left: 30px !important;
}
.p-xs-t-25 {
padding-top: 25px !important;
}
.p-xs-r-25 {
padding-right: 25px !important;
}
.p-xs-b-25 {
padding-bottom: 25px !important;
}
.p-xs-l-25 {
padding-left: 25px !important;
}
.p-xs-t-20 {
padding-top: 20px !important;
}
.p-xs-r-20 {
padding-right: 20px !important;
}
.p-xs-b-20 {
padding-bottom: 20px !important;
}
.p-xs-l-20 {
padding-left: 20px !important;
}
.p-xs-t-15 {
padding-top: 15px !important;
}
.p-xs-r-15 {
padding-right: 15px !important;
}
.p-xs-b-15 {
padding-bottom: 15px !important;
}
.p-xs-l-15 {
padding-left: 15px !important;
}
.p-xs-t-10 {
padding-top: 10px !important;
}
.p-xs-r-10 {
padding-right: 10px !important;
}
.p-xs-b-10 {
padding-bottom: 10px !important;
}
.p-xs-l-10 {
padding-left: 10px !important;
}
.p-xs-t-5 {
padding-top: 5px !important;
}
.p-xs-r-5 {
padding-right: 5px !important;
}
.p-xs-b-5 {
padding-bottom: 5px !important;
}
.p-xs-l-5 {
padding-left: 5px !important;
}
.p-xs-t-0 {
padding-top: 0px !important;
}
.p-xs-r-0 {
padding-right: 0px !important;
}
.p-xs-b-0 {
padding-bottom: 0px !important;
}
.p-xs-l-0 {
padding-left: 0px !important;
}
}
这是我第一次大量使用Less逻辑，所以请告诉我是否有更好的做事方法。
答案 0 :(得分：1)
主要建议：
each函数。因为无论如何您都使用Less 3.x （然后没有真正的理由不升级到 3.7 ，因为3. *之间没有重大的更改。*版本）-没有理由为琐碎的循环而烦恼递归mixins。递归mixin循环仅在生成“递归值”时才有用，即在每个新迭代需要重用prev生成的值时。迭代-这是each做不到的事情。
无论哪种方式，让我们看看您的示例有什么问题-仅供参考。
您的主要错误是您将媒体查询（例如.g-loop(@g - 1);）的“下一次呼叫”放置在错误的位置。基本上，您将其放置在媒体查询块的内部内，而应将其放置在外部内。因此，它们在结果中相互嵌套也就不足为奇了。
让我们从一个简化的示例开始（只是以相同的方式实现单级循环）：
.outer-iter(@i) when (@i > 0) {
block {
.outer-iter(@i - 1);
itick: @i;
}
}
.outer-iter(3);
这将产生类似的内容：
block {
itick: 3;
}
block block {
itick: 2;
}
block block block {
itick: 1;
}
正是因为每个新的block都是在前一个内部生成的。
在这种情况下，正确的循环代码应为：
.outer-iter(@i) when (@i > 0) {
.outer-iter(@i - 1);
block {
itick: @i;
}
}
还有一些外观上的错误（虽然不是很有害的错误，但仍然如此）表明您使用了一些石器时代的教程（大约6岁左右）。简要地：
.*-loop (0) {}终端-暂时不需要（只是噪音）length函数。好吧，我不会为您带来其他外观问题（是的，还有其他一些问题），让我们从（某种）固定代码开始：
...
@max-pm-size: 50;
.g-loop(@g) when (@g > 0) {
@responsive: extract(@responsivevars, @g);
@responsiveabv: extract(@responsivevarsabv, @g);
@media (max-width: @@responsive) {
.h-loop(@h) when (@h > 0) {
.i-loop(@i) when (@i > -1) {
.j-loop(@j) when (@j > 0) {
@direction: extract(@directionlist, @j);
@directionname: extract(@directions, @j);
@type: extract(@spacingtype, @h);
@typeabv: extract(@sapcingtypeabv, @h);
.@{typeabv}-@{responsiveabv}-@{direction}-@{i} {
@{type}-@{directionname}: @i*1px !important; /* each time you use !important a kitty dies */
}
.j-loop(@j - 1);
}
.j-loop(length(@directions));
.i-loop(@i - 5);
}
.i-loop(@max-pm-size);
.h-loop(@h - 1);
}
.h-loop(length(@spacingtype));
} // ~ end of @media
.g-loop(@g - 1); // <- this was your key mistake
}
.g-loop(length(@responsivevars));