Question

我正在使用一个循环来生成相当数量的背景渐变，每个颜色都有不同的颜色。我也从虚拟课程中扩展了一些一般的风格。

.update-bg-essentials{
    margin: 3px;
    border: 1px solid;
    border-radius: 8px;
    font-weight: 400;
    color: #FFFFFF;
    position: relative;
    padding: 0;
}

@bg-types: blogpost,ppic,nvideo,pvideo,album,user,comment;
@bg-colors: @pink,@pink-dark,#5c9c80,#6c779e,#826097,#3dac98,#af9d53;

.generate-bgs(@i: length(@bg-types)) when (@i > 0) {
    @bg-name: extract(@bg-types, @i);
    @bg-color: extract(@bg-colors, @i);

    .evt_bg_@{bg-name} {
        &:extend(.update-bg-essentials);
        border-color: @bg-color;
        background: @grey;
        background: -moz-linear-gradient(45deg,  @grey 0%, @bg-color 150%);
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,@grey), color-stop(150%,@bg-color));
        background: -webkit-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
        background: -o-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
        background: -ms-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
        background: linear-gradient(45deg,  @grey 0%,@bg-color 150%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{grey}', endColorstr='@{bg-color}',GradientType=1 );
        .update_head {
            background: @bg-color;
        }
    }
    .generate-bgs((@i - 1));
}
.generate-bgs;

输出如下：

.update-bg-essentials,
.evt_bg_comment,

...

.evt_bg_blogpost {
  margin: 3px;
  border: 1px solid;
  border-radius: 8px;
  font-weight: 400;
  color: #FFFFFF;
  position: relative;
  padding: 0;
}
.evt_bg_comment {
  border-color: #af9d53;
  background: #c6c7c9;
  background: -moz-linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #c6c7c9), color-stop(150%, #af9d53));
  background: -webkit-linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
  background: -o-linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
  background: -ms-linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
  background: linear-gradient(45deg, #c6c7c9 0%, #af9d53 150%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6c7c9', endColorstr='#af9d53', GradientType=1);
}
.evt_bg_comment .update_head {
  background: #af9d53;
}

...

.evt_bg_blogpost {
  border-color: #e1409e;
  background: #c6c7c9;
  background: -moz-linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #c6c7c9), color-stop(150%, #e1409e));
  background: -webkit-linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
  background: -o-linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
  background: -ms-linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
  background: linear-gradient(45deg, #c6c7c9 0%, #e1409e 150%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6c7c9', endColorstr='#e1409e', GradientType=1);
}
.evt_bg_blogpost .update_head {
  background: #e1409e;
}

这样可行但是让我感到很烦恼的是我的代码中的虚拟类仅用于生成的类的扩展。所以我尝试了这个。

@bg-types: blogpost,ppic,nvideo,pvideo,album,user,comment;
@bg-colors: @pink,@pink-dark,#5c9c80,#6c779e,#826097,#3dac98,#af9d53;

.generate-bgs(@i: length(@bg-types)) when (@i > 0) {
    @bg-name: extract(@bg-types, @i);
    @bg-color: extract(@bg-colors, @i);

    .evt_bg_@{bg-name} {
        & when (@i = length(@bg-types)) {
            margin: 3px;
            border: 1px solid;
            border-radius: 8px;
            font-weight: 400;
            color: #FFFFFF;
            position: relative;
            padding: 0;
        }
        & when (@i < length(@bg-types)){
            @extender: extract(@bg-types, length(@bg-types));
            &:extend(.evt_bg_@{extender});
        }
        border-color: @bg-color;
        background: @grey;
        background: -moz-linear-gradient(45deg,  @grey 0%, @bg-color 150%);
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,@grey), color-stop(150%,@bg-color));
        background: -webkit-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
        background: -o-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
        background: -ms-linear-gradient(45deg,  @grey 0%,@bg-color 150%);
        background: linear-gradient(45deg,  @grey 0%,@bg-color 150%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{grey}', endColorstr='@{bg-color}',GradientType=1 );
        .update_head {
            background: @bg-color;
        }
    }
    .generate-bgs((@i - 1));
}
.generate-bgs;

我的方法是使用虚拟类中的样式生成第一个背景，然后让其他人从中扩展。但不幸的是，这不起作用。使用生成的类并使用它编码时，将忽略extend。

这是因为它实际上还没有吗？

如何在不使用虚拟课程的情况下使其工作？

从同一循环中的循环构建的类扩展

0 个答案: