SCSS – использование «%» для объявления стиля CSS

Вот моя проблема:

Я хочу реализовать такой класс в своем проекте (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}%
    }
}

Я пробовал некоторые странные вещи, такие как: '%' \% '\%' '\%\', но я не думаю, что это правильный путь.

🤔 А знаете ли вы, что...
CSS позволяет разработчикам разделять структуру и стиль веб-содержимого.

[РЕШЕНО]Перейти к решению

55

2

Css75481 вопрос Sass3570 вопросов

В 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}%;
    }
}

Решено

Я нашел способ решить свою проблему.

По-видимому, вы не можете присвоить значение переменной, которая включает единицу измерения (например, %, px, em,...) непосредственно из интерполяции переменной. Для этого я использовал другой метод, а не тот, с которым я боролся:

@function calculatePercentage($value) {
    @return $value * 1%;
}

@for $i from 1 through 100 {
    $percentage: calculatePercentage($i);
    .h-#{$i}\% {
        height: $percentage;
    }
}

Спасибо вам всем !

SCSS – использование «%» для объявления стиля CSS

Ответы:

Интересные вопросы для изучения