Проверьте тип устройства в Sass

Question

Я пытаюсь проверить, совместимы ли единицы, а затем либо использовать calc (), либо просто вычислить их при предварительной обработке.

Есть ли способ проверить тип единицы в Sass?

Если я наберу:

//  SCSS

test {
  content: type-of(1px);
  content: type-of(1%);
  content: type-of(1em);
}

Я получу

/*  CSS  */

test  {
  content: number;
  content: number;
  content: number;
}

Есть ли способ получить что-то более похожее на:

 /*  CSS  */

test {
  content: px;
  content: percent;
  content: em;
}

Действительно просто, чтобы избежатьуродливый CSS, такой как margin-left: calc(5px + 5px);

Answer 1

Я думаю, что использовать calc() хорошо, но вы можете получить единицы, умножив исходное значение на 0, преобразовав в строку, а затем удалив ноль.

@function getUnit($value) {
  @return str-slice($value * 0 + "", 2, -1);
}

Демо: https://www.sassmeister.com/gist/6ac692efdbb8a28be8a3cd4346b39970

К вашему сведению, есть также функция unit(), но документы предупреждают, что:

«Эта функция предназначена для отладки;не гарантируется, что его выходной формат будет одинаковым во всех версиях или реализациях Sass. »

https://sass -lang.com / documents / modules / math # unit

Если это не имеет значения для вашего варианта использования, то это, вероятно, самый простой способ.

Answer 2

Вы можете создавать свои собственные функции, которые возвращают либо true, либо false на основе единицы, которую вы проверяете.

Уго Жираудель написал о расширенной проверке типов в Sass someлет назад, и сделал несколько полезных фрагментов, которые вы могли бы использовать повторно.

Например, вы можете проверить, является ли значение числом с единицей em или px, как это (удалите один из них изindex(), если вы хотите проверить единицу измерения):

@function is-em($value) {
  @return is-number($value) and index('em', 'px', unit($value)) != null;
}

@debug is-em(42em); // true
@debug is-em(42px); // true
@debug is-em(42vw); // false

Или, если значение является числом с единицей %, например:

@function is-percentage($value) {
  @return is-number($value) and unit($value) == "%";
}

@debug is-percentage(42.1337%); // true
@debug is-percentage(42cm);     // false

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