Problema de tipografía SASS Mixin al implementar varios idiomas

0

Estoy trabajando en un sitio web de reacción que usa sass para administrar el estilo. Entonces en el sitio web he implementado tipografía para el idioma inglés a través de sass mixins. Hay diferentes encabezados y cuerpos en la tipografía como encabezado1, encabezado2, cuerpo1, cuerpo2, etc. El formato de cada elemento en tipografía es como

  @mixin body1{
      font-size:10px,
      font-weight: 700,
      letter-spacing: 1px,
      line-height:1  
  }
   @mixin body2{
      font-size:5px,
      font-weight: 400,
      letter-spacing: 1px,
      line-height:1  
    }

Y luego incluyo este cuerpo en mi componente css como:

   .primaryButton .text{
     @include body1;
    }
    .secondaryButton .text{
     @include body2;
    }

por lo que el botón es un componente único que reacciona, solo estamos cambiando la clase principal en función de los accesorios de variación y, por lo tanto, su estilo.

Ahora el problema es que tengo que implementar la tipografía para diferentes idiomas, como alrededor de 50 idiomas, y no estoy seguro de qué enfoque genérico será mejor implementar.

Nota :

  1. No usamos clases genéricas en lugar de mixin para la tipografía porque tenemos una variación y un tema para cada componente y para cada variación y tema, el mismo elemento puede tener diferentes tamaños de fuente y otras propiedades, por lo que para diferentes variaciones cargamos diferentes elementos de tipografía basados ​​en el componente principal clase.
  2. Además, no quiero ir en cada archivo y luego sobrescribir la tipografía en inglés según la clase principal para cada idioma, ya que el tamaño del proyecto es demasiado grande para eso y 50 idiomas también son demasiados para ese enfoque. Y en el futuro el idioma puede aumentar.
2
  • El uso excesivo de mixins como este aumentará enormemente el tamaño de sus archivos CSS de salida. Recuerde que es básicamente copiar y pegar, ya que CSS es un lenguaje declarativo "tonto". Y aún puede tener flexibilidad con las clases CSS genéricas, solo necesita hacerlo mejor.
    max
    26/07/20 a las 11:16
  • @max Puedo usar la clase genérica también para la tipografía, pero para cada componente tenemos una variación que tiene un estilo diferente. Por lo tanto, también será una mala práctica poner una condición en cada elemento HTML para una clase genérica. En lugar de condicionar cada elemento html, puse una condición en la clase principal y luego, al usar esa clase, puse estilo para los elementos secundarios mediante el uso de mixins.
    user10014185
    26/07/20 a las 11:29
1

puedes usar así

Marcadores de posición

%body1{
  font-size:10px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height:1;
}
%body2{
  font-size:5px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height:1;
}
%body3{
  font-size:5px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height:1;
}

Configs

$langsConfig: (
  "en": (body2),
  "fr": (body1, body2),
  "cn": (body2, body3),
  "bn": (body1, body2, body3),
);

generador de CSS

@each $lang, $placeholderList in $langsConfig {
  .#{$lang} {
    .primaryButton {
      .text {
        @each $placeholder in $placeholderList {
          @extend %#{$placeholder}
        }
      }
    }
  }
}

Producción

.bn .primaryButton .text, .fr .primaryButton .text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  color: red;
}

.bn .primaryButton .text, .cn .primaryButton .text, .fr .primaryButton .text, .en .primaryButton .text {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color: green;
}

.bn .primaryButton .text, .cn .primaryButton .text {
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color: yellow;
}

Reaccionar implementación

export default function App() {
  const lang = "en";
  return (
    <div className={`${lang}`}>
      <div className="primaryButton">
        <h1 className="text">Hello CodeSandbox</h1>
        <h2 className="text">Start editing to see some magic happen!</h2>
      </div>
    </div>
  );
}

Explicación:

Marcador de posición: en lugar de mezclar, utilice el marcador de posición. Configuración: nombre del idioma y lista de mezcla relacionada Generador: hará un bucle con las configuraciones y creará el CSS en formas dinámicas

NOTA: si desea utilizar scss. Luego cree una función scss y pase las variables en el generador css.

Aquí está el enlace de Sandbox

Avísame si te ayuda. Podría ser más dinámico si pudiera conocer la implementación en el lado de reacción.