A continuación, realizaremos un análisis, yendo de la teoría a la práctica, acerca del tratamiento de las variables en sass, a lo largo del núcleo y del resto de los componentes del CMS.

La teoría: el desacople de las variables

Cuando se planteó el desarrollo de las hojas de estilos del CMS, se pensó en:

  1. un núcleo (system), donde se colocarían los componentes básicos y a las variables generales, por ejemplo: badge, dialog, tipography, tooltip, etc.
  2. otros componentes, más complejos y con propósitos más específicos, por ejemplo: backlist, form, modal, tabs, etc.

Ahora bien, la teoría dice que los componentes deben heredar de las variables generales pero manteniendo su independencia. Por ejemplo, habiendo una variable del sistema llamada $default-border-radius, el componente modal debe tener una variable:

$modal-border-radius: $default-border-radius !default;

La práctica

Lo cierto es que, cuando creamos el sistema de colores, lo que creemos que es el único modo de tener una librería coherente y escalable, repensamos también el sistema de variables.

La pregunta es: en la práctica ¿vamos a hacer un diseño en donde, por ejemplo, el modal tenga puntas rectas y los botones puntas redondeadas? La respuesta es que no.

Por eso, se tomó la desición de crear algunas variables generales muy significativas y utilizarlas a lo largo de todo el CMS, sin hacer el cambio a las variables locales de cada componente. Algunas de estas variables son:

// fonts
$font-size
$small-font-size
$large-font-size
$line-height
// borders
$default-border-width
$default-border-style
// radius
$small-border-radius
$medium-border-radius
$large-border-radius
$x-large-border-radius

Como puede verse, no son muchas estas variables, sin embargo, tienen un amplio uso a lo largo de todo el framework.

 

Los nombres generales de variables generales

Una cuestion algo diferente ocurre con los nombres generales de variables generales, por ejemplo: $zindex-level-1, $zindex-level-2... o $box-shadow-1, $box-shadow-2 ....

Lo cierto es que, a la hora de utilizar esas variables, suele ocurrir la duda de qué valor se utilizaba para tal o cual elemento: un botón, un modal o un panel. En esos casos, hemos optado, en el sistema, por nombres muy específicos: $modal-box-shadow, $zindex-tooltip, etc.

Es necesario aclarar que este tipo de valores, como ser: z-index o box-shadow, deben estar centralizados, aunque no sean parte del sistema, ya que trabajan en conjunto con muchos otros componentes.

 

Conclusión

En principio, existe una pérdida de autonomía de los componentes, delegando valores a los lineamientos generales del framework. Sin embargo, creemos que, en la práctica, no es común modificar a nivel de componente un valor, o es posible renunciar a hacerlo, y ganar por el lado de tener un número significativamente menor de variables.

Por otro lado, esto ya se hace con los colores, ganando claridad, coherencia y escalabilidad, por lo que repetir el concepto para otras variables termina siendo parte de una misma lógica.