Добавить тип единицы в результат вычисления

Ответ 1

Единственный способ добавить единицу к числу - арифметика.

Для выполнения таких операций, как конкатенация (например, 1 + px) или интерполяция (например, #{1}px), будет создана только строка, которая выглядит как число. Даже если вы абсолютно уверены на 100%, что никогда не будете использовать свое значение в другой арифметической операции, вы не должны этого делать.

Более важно, чем неспособность выполнять арифметические операции, вы не сможете использовать их с другими функциями, которые ожидают число:

$foo: 1; // a number
$foo-percent: $foo + '%'; // a string

.bar {
    color: darken(blue, $foo-percent); //Error: "1%" is not a number!
}

$ сумму: "1%" не является числом для "темнеет"

Ничего не получится, приведя ваши числа к строкам. Всегда используйте арифметику (умножение на 1 или сложение на 0), чтобы добавить единицу:

$foo: 1; // a number
$foo-percent: $foo * 1%; // still a number! //or: $foo + 0%

.bar {
    color: darken(blue, $foo-percent); //works!
}

Выход:

.bar {
  color: #0000fa;
}

Вот миксин, который я написал как часть моей библиотеки миксинов Flexbox, который захлебнется, если вы передадите строку (для тех, кто не знаком с Flexbox, оригинальная спецификация допускает только целые числа для свойства box-flex. flex: auto или flex: 30em не может быть совместимым со сравнимым свойством box-flex, чтобы миксин не беспокоился)

@mixin flex($value: 0 1 auto, $wrap: $flex-wrap-required, $legacy: $flex-legacy-enabled) {
    @if $legacy and unitless(nth($value, 1)) {
        @include legacy-flex(nth($value, 1));
    }

    @include experimental(flex, $value, flex-support-common()...);
}

@mixin legacy-flex($value: 0) {
    @include experimental(box-flex, $value, $box-support...);
}

Ответ 2

Вы можете попробовать любой из них:

font-size: $size * 1px;

или

font-size: $size + unquote("px");

Где $size - результат вашего расчета.

Ответ 3

Выберите метод, который вы предпочитаете

$font: 24px;
$base: 16px;

Без переменных

.item1 { font-size: #{(24px / 16px)}em; }

Использование только переменных

.item2 { font-size: #{$font / $base}em; }

Одна переменная

.item3 { font-size: #{$font / 16px}em; }
.item4 { font-size: #{24px / $base}em; }

Выход для всех них

.item1 { font-size: 1.5em; }
.item2 { font-size: 1.5em; }
.item3 { font-size: 1.5em; }
.item4 { font-size: 1.5em; }

Используемый метод называется интерполяцией # {}

Ответ 4

Я предполагаю, что вы спрашиваете об этом, потому что в окружающем контексте 1 em = 16 px, и вы хотите использовать это отношение для преобразования целевого размера шрифта из пикселей в ems.

Если это так, то нужно сделать следующее: умножить размер шрифта на коэффициент масштабирования 1em/16px, например:

$h1-font-size: 24px;
$body-font-size: 16px;

$body-em-scale: 1em / $body-font-size;

h1 {
  font-size: $h1-font-size * $body-em-scale;  // -> 1.5em
}

или просто:

h1 {
  font-size: $h1-font-size * (1em / $body-font-size);  // -> 1.5em
}

Именно так оно и работает в физике: если есть, скажем, 50 родинки воды, и вы хотите знать, сколько который весит gram, вы умножаете количество воды, которую вы имеете (= 50 моль), с молярная масса воды (& около 18 г/моль), чтобы выяснить, что ваш образец воды весит 50 молей и раз; 18 г/моль & прим. 900 граммов. Преобразование пикселей в ems в SASS работает точно так же: сначала узнайте, сколько ems есть на пиксель, в контексте, в котором вы собираетесь использовать правило, а затем умножьте размер в px с этим соотношением, выраженный в единицах em/пикс.

Ps. Конечно, если единицы, которые вы конвертировали между собой, имели фиксированный коэффициент, о котором SASS уже знал, тогда вы можете просто позволить ему делать автоматическое преобразование для вас, используя "ноль плюс трюк". Например, если вы хотите преобразовать размер шрифта из px в cm, вы можете просто сделать:

h1 {
  font-size: 0cm + $h1-font-size;  // -> 0.635cm
}

Это работает, потому что SASS позволяет вам объединить два значения, указанные в совместимых единицах (например, px и cm), и будет выражать результат в тех же единицах, что и первое значение в сумме. Причина, по которой этот трюк не работает для px → em, заключается в том, что здесь коэффициент преобразования не фиксирован, но зависит от окружающего контекста, и поэтому SASS не знает, как сделать преобразование автоматически.

Ответ 5

Лучший способ добавить юнит - это использовать ... * 1em или ... + 0em где em - юнит, который вы хотите получить:

font-size: (24px/16px) + 0em; // ... + 0px for px
//or
font-size: (24px/16px) * 1em; 
//both produce: font-size: 1.5em;

Таким образом, он останется как число, так что вы можете использовать его в математических операциях или других функциях.

Но если вы хотите получить результат в виде строки или по каким-то причинам не заботиться о числовом значении результата, вы также можете просто получить его следующим образом:

font-size: (24px/16px) + em; //font-size: 1.5em; //em does not include quotations

нет необходимости использовать unquote или #{} здесь (как написано в других ответах)!