SCSS - 使用 '%' 声明 css 样式

Question

这是我的问题：

我想在我的项目中做这样的类（class =“h-[2％]”），所以我做了这个小代码，但有些东西不正确......

我对 SCSS 不熟悉，所以我不知道为什么 'px' 做得很好，但 '%' 却不好......

/* Pixels */
@for $i from 1 through 100 {
    .w-#{$i}px {
        width: #{$i}px
    }
}

/* Purcent */
@for $i from 1 through 100 {
    .w-#{$i}% {
        width: #{$i}%
    }
}

/* Pixels */
@for $i from 1 through 100 {
    .h-#{$i}px {
        height: #{$i}px
    }
}

/* Purcent */
@for $i from 1 through 100 {
    .h-#{$i}% {
        height: #{$i}%
    }
}

我尝试过一些奇怪的事情，例如：'%' \% '\%' '\%\' 但我不认为这是最好的方法。

非常感谢那些拯救我的人！

Answer 1

在 SCSS 中，当处理百分比时，需要使用反斜杠 (%) 转义“%”字符。

/* Pixels */
@for $i from 1 through 100 {
    .w-#{$i}px {
        width: #{$i}px;
    }
}

/* Percentages */
@for $i from 1 through 100 {
    .w-#{$i}\% {
        width: #{$i}%;
    }
}

/* Pixels */
@for $i from 1 through 100 {
    .h-#{$i}px {
        height: #{$i}px;
    }
}

/* Percentages */
@for $i from 1 through 100 {
    .h-#{$i}\% {
        height: #{$i}%;
    }
}