У меня есть одна функция в sass, как это
$positions: left top bottom right;
$short-paddings: lp tp bp rp;
@each $current-position in $positions {
$i: index($positions, $current-position);
@for $x from 1 through 2 {
@each $current-short in $short-paddings{
.#{$current-short}-#{$x} {
padding-#{$current-position}: #{$x}px !important;
}
}
}
}
Когда я делаю вывод, я получаю что-то такое
.pl-1 {
padding-left: 1px !important;
}
.pt-1 {
padding-left: 1px !important;
}
.pb-1 {
padding-left: 1px !important;
}
.pr-1 {
padding-left: 1px !important;
}
.pl-2 {
padding-left: 2px !important;
}
.pt-2 {
padding-left: 2px !important;
}
.pb-2 {
padding-left: 2px !important;
}
.pr-2 {
padding-left: 2px !important;
}
.pl-1 {
padding-top: 1px !important;
}
.pt-1 {
padding-top: 1px !important;
}
.pb-1 {
padding-top: 1px !important;
}
.pr-1 {
padding-top: 1px !important;
}
.pl-2 {
padding-top: 2px !important;
}
.pt-2 {
padding-top: 2px !important;
}
.pb-2 {
padding-top: 2px !important;
}
.pr-2 {
padding-top: 2px !important;
}
.pl-1 {
padding-bottom: 1px !important;
}
.pt-1 {
padding-bottom: 1px !important;
}
.pb-1 {
padding-bottom: 1px !important;
}
.pr-1 {
padding-bottom: 1px !important;
}
.pl-2 {
padding-bottom: 2px !important;
}
.pt-2 {
padding-bottom: 2px !important;
}
.pb-2 {
padding-bottom: 2px !important;
}
.pr-2 {
padding-bottom: 2px !important;
}
.pl-1 {
padding-right: 1px !important;
}
.pt-1 {
padding-right: 1px !important;
}
.pb-1 {
padding-right: 1px !important;
}
.pr-1 {
padding-right: 1px !important;
}
.pl-2 {
padding-right: 2px !important;
}
.pt-2 {
padding-right: 2px !important;
}
.pb-2 {
padding-right: 2px !important;
}
.pr-2 {
padding-right: 2px !important;
}
Но есть какой-то неправильный css, который мне нужно вывести, это то, что в финальном css у меня будет что-то = это
.pl-1 {
padding-left: 1px !important;
}
.pt-1 {
padding-top: 1px !important;
}
.pb-1 {
padding-bottom: 1px !important;
}
.pr-1 {
padding-right: 1px !important;
}
.pl-2 {
padding-left: 2px !important;
}
.pt-2 {
padding-top: 2px !important;
}
.pb-2 {
padding-bottom: 2px !important;
}
.pr-2 {
padding-right: 2px !important;
}
Любая идея, где я делаю неправильно?
Первая петля @each $current-position in $positions вызывает вашу проблему. Вы можете удалить его и добиться того, что вы хотите с картой:
$short-paddings: (
top: 'pt',
left: 'pl',
bottom: 'pb',
right: 'pr'
);
@for $i from 1 through 2 {
@each $position, $prefix in $short-paddings {
.#{$prefix}-#{$i} {
padding-#{$position}: #{$i}px !important;
}
}
}