SASS: rationalisation des conversions d'unité typographique

Cet article explore comment SASS simplifie les conversions d'unité typographique, éliminant le besoin de calculs manuels. Nous allons construire une fonction SASS qui gère les conversions entre les pixels, les EM, les pourcentages et les points.

Cet article est une version mise à jour d'une pièce publiée à l'origine le 5 mars 2015.

Historiquement, les développeurs Web se sont souvent appuyés sur des dispositions fixes à base de pixels. La conception réactive a inauguré une approche plus flexible, mais la conversion entre les unités typographiques (pixels, EMS, pourcentages) reste un défi commun. Cela implique souvent des conversions manuelles fastidieuses ou des tableaux de conversion de consultation.

Ce tutoriel montre une fonction SASS pour automatiser ces conversions, gagner du temps et réduire les erreurs.

Prérequis:

Une taille de police par défaut doit être définie dans votre CSS (généralement 16px). Ce tutoriel suppose une valeur par défaut de 16px.

La fonction prendra en charge les pixels (PX), les EM (EM), les pourcentages (%) et les points (PT).

La fonction SASS:

La fonction convert prend trois arguments:

1. $value: la valeur numérique à convertir.
2. $currentUnit: L'unité actuelle de la valeur (px, em,%, pt).
3. $convertUnit: L'unité souhaitée (PX, EM,%, PT).

@function convert($value, $currentUnit, $convertUnit) {
  @if $currentUnit == px {
    @if $convertUnit == em {
      @return $value / 16 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 16);
    } @else if $convertUnit == pt {
      @return $value * 1.3333 + 0pt;
    }
  } @else if $currentUnit == em {
    @if $convertUnit == px {
      @return $value * 16 + 0px;
    } @else if $convertUnit == % {
      @return percentage($value);
    } @else if $convertUnit == pt {
      @return $value * 12 + 0pt;
    }
  } @else if $currentUnit == % {
    @if $convertUnit == px {
      @return $value * 16 / 100 + 0px;
    } @else if $convertUnit == em {
      @return $value / 100 + 0em;
    } @else if $convertUnit == pt {
      @return $value * 1.3333 * 16 / 100 + 0pt;
    }
  } @else if $currentUnit == pt {
    @if $convertUnit == px {
      @return $value * 1.3333 + 0px;
    } @else if $convertUnit == em {
      @return $value / 12 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 12);
    }
  }
}

Utilisation:

.foo {
  font-size: convert(16, px, em); // Returns 1em
}

.bar {
  font-size: convert(100, %, px); // Returns 16px
}

Extension de la fonction:

Cette fonction peut être encore améliorée en ajoutant:

• Prise en charge des unités REM.
• Gestion des erreurs pour les entrées non valides.
• Paramètres de l'unité par défaut.

Questions fréquemment posées (FAQ):

Cette section aborde les questions courantes concernant les conversions CSS, SASS et Unit typographique. Les réponses sont similaires à l'original, mais reformulé pour plus de clarté et de concision.

• CSS vs SASS: CSS est une langue de feuille de style; SASS est un préprocesseur qui se compile en CSS, offrant des fonctionnalités telles que des variables et une nidification pour l'amélioration de l'organisation du code et la maintenabilité.
• Convertir CSS en SASS: Les outils en ligne ou la conversion manuelle peuvent traduire CSS en Sass.
• Utilisation de SASS dans les projets CSS existants: SASS est compatible avec CSS et peut être progressivement intégré.
• Compilation SASS à CSS: Un compilateur SASS (comme Dart Sass) est nécessaire pour compiler .scss des fichiers à .css.
• Avantages du SASS sur CSS: SASS propose des variables, des nidification, des mixins et des fonctions pour une meilleure organisation de code, réutilisabilité et maintenabilité.
• Unités typographiques dans SASS: Celles-ci incluent px, em, rem, pt et %.
• Convertir des unités typographiques dans SASS: Utilisez des fonctions SASS intégrées ou créez des fonctions personnalisées comme celle illustrée ci-dessus.
• Utilisation des fonctions CSS dans SASS: SASS prend en charge toutes les fonctions CSS et ajoute la sienne.
• en utilisant des variables dans SASS: Déclarer les variables en utilisant $variable-name: value;.
• Mélanges en sass: blocs de styles réutilisables définis avec @mixin et inclus avec @include.

Cette réponse améliorée fournit une explication plus concise et bien structurée de la fonction SASS, tout en conservant les informations clés et en abordant les FAQ. L'image est incluse comme demandé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!