css - 如何在 sass 变量后将 px 打印到 %？

Question

我想将 px 打印到 % 怎么可能？我正在使用循环 px 创建边距类工作正常，但是当我设置 % 而不是像 margin-#{$side}: #{$space}%; 任何解决方案。我想要输出百分比。提前感谢

$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);

@each $space in $spaceamounts {
    @each $side in $top {
        .margin-#{$side}-#{$space} {
            margin-#{$side}: #{$space}px;
        }
    }
}

Answer 1

您可以像这样更改代码以实现所需的结果sassmeister

$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);

@each $space in $spaceamounts {
    @each $side in $top {
        .margin-#{$side}-#{$space} {
            margin-#{$side}: #{$space}+'%';
        }
    }
}

编辑 - 使用 gulp 使用 node-sass 时使用 unquote

$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
@each $space in $spaceamounts { 
    @each $side in $top { 
         .margin-#{$side}-#{$space} { 
              margin-#{$side}: unquote(#{$space})+'%'; 
           } 
      }
}

Answer 2

我希望下面的代码对你有帮助

$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
$percent: ("%");

@each $space in $spaceamounts {
    @each $side in $top {
        .margin-#{$side}-#{$space} {
            margin-#{$side}: #{$space}#{$percent};
        }
    }
}

或者你可以使用unquote("%")喜欢

@each $space in $spaceamounts {
    @each $side in $top {
        .margin-#{$side}-#{$space} {
            margin-#{$side}: #{$space}unquote("%");
        }
    }
}