SASS: юниты ведут себя неожиданно - PullRequest
Новая
       22

SASS: юниты ведут себя неожиданно

0 голосов
/ 08 апреля 2020

Я столкнулся с проблемой использования переменных в SASS / S CSS. Пример ниже не требует пояснений. Не могли бы вы объяснить, что я делаю неправильно и как это сделать правильно?

Я подозреваю, что проблема связана с обработкой оператора / либо как деление, либо как разделитель. Однако, насколько я понимаю, в следующих случаях оператор / рассматривается как деление:

  • Если значение или любая его часть хранится в переменной или возвращается функцией.
  • Если значение заключено в круглые скобки.
  • Если значение используется как часть другого арифметического c выражения.

В моем случае первый и третий происходит случай, и использование скобок не помогает. 

    $var : 1s/1px;
    $var2 : 1px/1s;

    $t : 1s;
    $l : 1px;

    div
    {
        width: $var2*$t; /* =0.01042s, expected: 1px/1s*1s=1px */
        transition: left $var*$l; /* =0.001px, expected: 1s/1px*1px = 1s */
    }

    div{
        /*I know, this doesn't make sense in CSS, but it shows that something is strange */
        color: $var; /* =0.001 ??? */
        color: 1/$var; /* =1000 ??? */
        /* */
        color: $var2; /* =0.01042 ???*/
        color: 1/$var2; /* =96 ???*/

}

Если значение, хранящееся в переменной, является умножением, то все в порядке: 

$a : 40px * 3s;
p{
    width: $a /5s;   /* = 24px as expected */

}
...