Comment retirer l'unité de n'importe quel nombre dans SASS ?

Question

Je sais que vous pouvez enlever les unités des nombres dans SASS lorsque vous connaissez l'unité à l'avance comme ceci :

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

Mais est-il possible de retirer l'unité d'un nombre sans savoir d'abord quelle est l'unité ?

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

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

Answer 1

--

UPDATE : Vous ne devriez jamais avoir besoin d'utiliser cette fonction. Les mathématiques de Sass sont très intelligentes en ce qui concerne les unités, et je n'ai jamais vu un cas d'utilisation dans lequel la suppression des unités était une meilleure option que l'utilisation de mathématiques correctes pour obtenir ce dont vous avez besoin. Voir le Fil de discussion sur les problèmes liés à Sass où cette question a été longuement discutée.

C'est une fonction intelligente, mais si vous avez envie de l'utiliser, c'est qu'il y a probablement un problème avec vos mathématiques. Ne vous rabattez pas sur cette fonction. Corrigez plutôt vos maths.

--

Vous devez diviser par 1 de la même unité. Si vous utilisez unit() Si l'on utilise la méthode de calcul de l'indice, on obtient une chaîne de caractères au lieu d'un nombre, mais si l'on multiplie par zéro et que l'on ajoute 1, on obtient ce dont on a besoin :

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

Ça marche. strip-units(13.48cm) retournera 13.48 .

Answer 2

Le seul cas d'utilisation de la fonction SASS Strip Units est l'écriture de fonctions de conversion d'unités. Je ne l'ai trouvée utile que pour la tâche de conversion de PX en EM/REM et vice versa.

Vous devez diviser par 1 de la même unité. Si vous utilisez unit(), vous obtenez une chaîne au lieu d'un nombre, mais si vous multipliez par zéro et ajoutez 1, vous avez ce dont vous avez besoin - Miriam Suzanne

Je pense que le compilateur SASS traite les valeurs de manière très similaire à ce que fait l'interpréteur PHP (avec un avertissement cependant), donc je pense que l'affirmation ci-dessus est incorrecte. Si vous divisez ou multipliez une chaîne de caractères (qui commence par un nombre, par ex. '16px' ) avec une valeur numérique (ou une chaîne de caractères qui commence par un nombre), la chaîne de caractères est convertie en nombre pour que le compilateur puisse effectuer l'opération.

Il en va de même pour l'ajout d'une chaîne à un nombre, qui convertit le nombre en chaîne.

La solution suivante applique correctement cette tactique :

@function strip-unit($value) {
  @return $value / 1;
}

Answer 3

Je pense que vous devriez ajouter une fonction Ruby personnalisée pour dépouiller les unités (voir la documentation sur ajout de fonctions personnalisées ). Cela ressemblerait à quelque chose comme ceci, je pense (avertissement, non testé) :

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