Css AEM 6.5版，是否可以合并类？

我正在从事AEM V.6.5的工作，并正在编写响应性的属性。 我需要在这里包含每个GridColumn，作为下面的代码

@media (max-width: 768px) {
    .aem-Grid.aem-Grid--default--12 > {
        .aem-GridColumn.aem-GridColumn--default--12,
        .aem-GridColumn.aem-GridColumn--default--11,
        .aem-GridColumn.aem-GridColumn--default--10,
        .aem-GridColumn.aem-GridColumn--default--8,
        .......
        .aem-GridColumn.aem-GridColumn--default--1 {
            width: 100%;
        }
    }
}

它很长！我正在寻找一种简短的写作方法。我尝试了下面的代码，但不知何故它不起作用

@media (max-width: 768px) {
        .aem-Grid.aem-Grid--default--12 > {
            .aem-GridColumn.aem-GridColumn--default--* {
                width: 100%;
            }
        }
    }

---

请帮我一把。谢谢

如果你能使用更少的CSS，你可以使用一个

@介质（最大宽度：768px）{
.aem-Grid.aem-Grid--默认值--12>{
.生成列（12）；
}
}
。在（@i=<@n）时生成列（@n，@i:1）{
.aem GridColumn.aem GridColumn--默认值--@{i}{
宽度：100%；
}
.生成列（@n，（@i+1））；
}

我们有一个

OOTB

文件，可以对AEM网格模板进行任何更改。这对你来说会容易得多

文件为：

grid.less

路径：

ui.apps/src/main/content/jcr_root/apps/{client name}/clientlibs/clientlib site/less/grid.less

有用的文章

@media (max-width: 768px) {
    .aem-Grid.aem-Grid--default--12 > {
        .generate-columns(12);
    }
}

.generate-columns(@n, @i: 1) when (@i =< @n) {
    .aem-GridColumn.aem-GridColumn--default--@{i} {
        width: 100%;
    }
    .generate-columns(@n, (@i + 1));
}