function - tutorial - ¿Cómo se quita la unidad de cualquier número en SASS?

sass--watch

Question

Sé que puedes quitar unidades de números en SASS cuando conoces la unidad con anterioridad de la siguiente manera:

$number: 16px;
$without-unit: 16px / 1px;
@warn $without-unit; // 16

¿Pero es posible quitar la unidad de un número sin saber cuál es la unidad primero?

@function strip-unit($number) {
  // magic code here...
}

@warn strip-unit(16px); // 16

Answer 1

-

ACTUALIZACIÓN: nunca deberías necesitar usar esta función. La matemática Sass es muy inteligente con respecto a las unidades, y nunca he visto un caso de uso en el que las unidades de extracción fueran una mejor opción que el simple uso de las matemáticas correctas para obtener lo que necesita. Ver el hilo de problema de Sass donde esto ha sido discutido extensamente.

Es una función inteligente, pero si alguna vez tiene ganas de usarla, probablemente haya un problema con sus matemáticas. No recurra a esta función. Arregle su matemática en su lugar.

-

Necesitas dividir por 1 de la misma unidad. Si usa unit() , obtiene una cadena en lugar de un número, pero si multiplica por cero y agrega 1, tiene lo que necesita:

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

Eso funciona. strip-units(13.48cm) devolverán 13.48 .

Answer 2

Creo que tendrías que agregar una función de Ruby personalizada para quitar las unidades (consulta la documentación sobre cómo agregar funciones personalizadas ). Se vería algo como esto, creo (advertencia, no probado):

module Sass::Script::Functions
  def strip_units(num)
    assert_type num, :Number
    Sass::Script::Number.new(num.value)
  end
end