Tematización con Sass: un tutorial de SCSS
Publicado: 2022-03-11El desarrollo de hojas de estilo con Sass, incluso cuando se utilizan sus funciones más básicas, como propiedades o variables anidadas, ahorra un tiempo valioso y facilita la vida de los desarrolladores front-end. No sorprende que los preprocesadores de CSS hayan sido ampliamente adoptados como la forma de facto de crear estilos para sitios web y aplicaciones; simplemente ya no podemos vivir sin ellos.
Cuando se trata de temas ; es decir, cambiando la apariencia de su sitio web mientras mantiene su diseño, las características de Sass, como combinaciones o funciones, ¡pueden sentirse como tomar un avión en lugar de caminar! En este tutorial de SCSS, vamos a crear un tema mínimo y usar SCSS para darle a nuestra programación de CSS algunos superpoderes.
Un enfoque básico de mezcla
Digamos que tenemos el siguiente diseño:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> Nos han pedido que creemos varios temas para él. El tema tiene que cambiar los colores para todos los contenedores (incluido el contenedor principal) y el botón, y el tema estará determinado por una clase en el cuerpo, o también podría ser un contenedor "externo":
<body class="theme-1">Construyamos un mixin llamado "themable" que contendrá nuestro esquema de color como parámetros.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Luego úsalo para generar nuestros temas:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); En este punto, ya hemos ahorrado mucho tiempo, pero hay algunos problemas con este enfoque:
Los temas normalmente tienen muchas propiedades diferentes además de los colores. Por ejemplo, si quisiéramos modificar el tema de Bootstrap, escribir un mixin siguiendo la “receta” anterior sería difícil de mantener y el código difícil de leer. Además, en realidad no estamos siguiendo las mejores prácticas de Sass, por ejemplo, ingresando códigos de color hexadecimales directamente en el mixin.
Diseñe un esquema de estilos con Sass Maps
Con la ayuda de los mapas, que son principalmente matrices indexadas clave, podemos crear un conjunto de estilos más semánticos y significativos para nuestro tema, que será más fácil de mantener y comprender para nuestros colegas desarrolladores. También podríamos usar listas , pero, personalmente, creo que los mapas son más adecuados para este propósito. Las listas no tienen claves, mientras que las claves se explican por sí mismas.
El mapa para nuestro nuevo enfoque será un mapa anidado :
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); Si quisiéramos acceder a cada sección de nuestro theme-1 y sus submapas, usamos la directiva @each para recorrer cada uno de ellos:
@each $section, $map in $theme-1 $section devolverá la clave de la sección actual y $map devolverá el mapa anidado que corresponde a esa clave.
Luego, podemos acceder a las propiedades de cada mapa, digamos la propiedad de fondo (bg), usando la función map-get :
map-get($map, bg)Finalmente, combinando nuestro nuevo mixin, basado en nuestra estructura de mapas, podemos crear tantos temas como queramos:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Tenga en cuenta que también estamos usando la directiva @if para diferenciar las propiedades de las secciones que no son botones.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }De esta forma, podemos añadir diferentes propiedades para algunas secciones para crear propiedades específicas o incluso reglas, o podemos distinguir entre una clave con un solo valor de otra con un mapa anidado.
Nuestro tema también podría consistir en muchos mapas utilizados por varios mixins, aplicados en diferentes partes de nuestra hoja de estilo. Todo depende de la complejidad de nuestro diseño base y, por supuesto, de nuestro enfoque personal.
Optimización adicional
Sass ofrece útiles funciones integradas para ahorrarnos aún más trabajo; por ejemplo, el hsl funciona como lighten u darken para calcular, por ejemplo, el color de un botón al pasar el mouse sobre él.
Podemos modificar el código del botón para aclarar su fondo al pasar el mouse, independientemente del color de fondo original. De esta manera, no tenemos que agregar otro color para este estado.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }Además, con el uso de módulos Sass, nuestro código puede ser aún más legible y escalable; cada mapa temático puede estar contenido en un módulo y luego importarse a nuestra hoja de estilo principal.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …Esto requeriría que los módulos se coloquen en el proyecto como:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Si está interesado en obtener más información sobre el uso de Sass para SECAR su CSS, el compañero Toptaler Justin Brazeau y entusiasta de Sass analiza esto en su brillante artículo Sass Mixins: Keep Your Stylesheets DRY .