我嘗試使用each()函數和LESS中的字符串插值來生成動態CSS類名。
我嘗試了以下代碼:
@spacing-sizes: 0 0.25 0.5 1 1.5 3;
@breakpoints: '' 'sm' 'md' 'lg' 'xl' 'xxl';
@breakpoint-widths: 0px 576px 768px 992px 1200px 1400px;
.generate-classes(@prefix, @size, @value) {
.loop-breakpoints(@index: length(@breakpoints)) when (@index > 0) {
@breakpoint: e(extract(@breakpoints, @index));
@width: extract(@breakpoint-widths, @index);
@class-name: ~"@{prefix}-@{size}@{breakpoint}";
& when (default(@breakpoint)) {
@{class-name} { @prefix: unit(@value, rem) !important; }
}
& when not (default(@breakpoint)) {
@media (min-width: @width) { @{class-name} { @prefix: unit(@value, rem) !important; } }
}
.loop-breakpoints(@index - 1);
}
.loop-breakpoints();
}
.generate-sizes(@index, @size) when (@index > -1) {
.generate-classes("m", @index, @size);
.generate-classes("mt", @index, @size);
.generate-classes("mb", @index, @size);
.generate-classes("ml", @index, @size);
.generate-classes("mr", @index, @size);
.generate-classes("mx", @index, @size);
.generate-classes("my", @index, @size);
.generate-classes("p", @index, @size);
.generate-classes("pt", @index, @size);
.generate-classes("pb", @index, @size);
.generate-classes("pl", @index, @size);
.generate-classes("pr", @index, @size);
.generate-classes("px", @index, @size);
.generate-classes("py", @index, @size);
.generate-sizes(@index - 1, @size);
}
.each(@spacing-sizes, .(@value, @index) {
.generate-sizes(@index - 1, @value);
});
但是,我遇到了一個解析錯誤,這個錯誤不是很好描述:
致命錯誤:分析錯誤:在處失敗);第44行
我嘗試了不同的方法,比如嘗試如下不同的語法:
each(@spacing-sizes, {
.generate-sizes(@index - 1, @value);
});
,但我仍然得到同樣的錯誤。
上一篇vue 用戶登錄狀態
下一篇vue帶參方法