Предотвратите использование Sass для котировки arround value

Я спокоен для Sass... Я хочу создать некоторый css с процентными значениями, например:

width : 13%;

Значение - результат операции с номером sass number. Написание этого

width : $main-width + "%"

scss-код генерирует это:

width : "13%";

css, что на самом деле не работает, потому что оно должно быть:

width : 13%;

писать

width : $main-width %;

приводит к

width : 13 "%"

что также приводит к неработоспособному css-правилу. Есть ли способ сделать Sass print 13% равным, без кавычек?

Ответы

Ответ 1

Подумайте о единицах в Сасс как переменные в алгебре вместо просто конкатенации строк.

В алгебре: 2x * 3 = 6x

В Сасс: 13 * 1% = 13%

Используйте этот подход для более продвинутой математики. 10px * 3px = 30px*px

Но px*px не является допустимым блоком CSS, поэтому вам нужно отменить его, делясь на 1px

30px*px / 1px = 30px

Надеюсь, что это поможет вам решить свой первоначальный вопрос.

Ответ 3

Вы можете попробовать #. У меня была аналогичная проблема с mixin и перечислены

@mixin p($value, $position: a, $unit: $rhythm-unit){
  $vallist: ();
  @if length($value) > 1 {
    @each $sval in $value {
      $sval: 0 !default;
      $vallist: append($vallist, #{$sval}#{$unit});
    }
    padding: $vallist;
  } @else{
    @if $position == t {
      padding-top: $value+$unit;
    } @else if $position == r {
      padding-right: $value+$unit;
    } @else if $position == b {
      padding-bottom: $value+$unit;
    } @else if $position == l {
      padding-left: $value+$unit;
    } @else {
      padding: $value+$unit;
    }
  }
}

Проблема была

append($vallist, $sval+$unit);

Он всегда добавлял кавычки вокруг этих значений, например. "1rem" "1.25rem", который не является правильным синтаксисом css.

Я заменил его на:

append($vallist, #{$sval}#{$unit});

Как вы можете видеть, я использую # -знак с {} и +, он больше не нужен. Очень интересно здесь, что это появляется только со списками/добавлением, как вы можете видеть в моем внешнем другом. Вы можете найти его на странице справки sass Разделить и слэш Если вы хотите использовать переменные вместе с простым CSS/, вы можете использовать # {} для их вставки. Например:   п {     $ font-size: 12px;     $ line-height: 30px;     font: # {$ font-size}/# {$ line-height};   }

Надеюсь, что это поможет