desarrollo de hojas de estilos con Sass, incluso cuando se utilizan sus características más básicas, como propiedades de anidamiento o variables, ahorra un tiempo valioso y facilita la vida a los desarrolladores front-end. No es sorprendente que los preprocesadores CSS hayan sido ampliamente adoptados como la forma de facto de crear estilos para sitios web y aplicaciones; simplemente no podemos vivir sin ellos más.,
cuando se trata de tematización; es decir, cambiar la apariencia de su sitio web mientras mantiene su diseño, las características de Sass, como mixins 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 dar a nuestra programación CSS algunos superpoderes.
Un Básico Mixin Enfoque
supongamos que tenemos el siguiente esquema:
Nos han pedido crear varios temas para ella., El tema tiene que cambiar los colores para todos los contenedores (incluido el contenedor principal) y el botón, y el tema será determinado por una clase en el cuerpo, o podría ser un contenedor «externo» también:
<body class="theme-1">construyamos un mixin llamado «themable» que contendrá nuestro esquema de color como parámetros.,
luego utilícelo 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:
temas normalmente tienen muchas propiedades diferentes al lado de los colores. Por ejemplo, si queremos modificar el tema Bootstrap, escribir un mixin siguiendo la «receta» anterior sería difícil de mantener y el código difícil de leer. Además, no estamos siguiendo las mejores prácticas de Sass, por ejemplo, introduciendo códigos de color hexadecimales directamente en el mixin.,
diseñe un esquema de estilos con mapas Sass
con la ayuda de mapas, que son principalmente como matrices indexadas clave, podemos construir un conjunto de estilos más semántico y significativo para nuestro tema, que será más fácil de mantener y comprender por nuestros colegas desarrolladores. Podríamos usar listas también, pero, personalmente, encuentro los mapas más adecuados para este propósito. Las listas no tienen claves, mientras que las claves son auto-explicables.,
el mapa para nuestro nuevo enfoque será un mapa anidado:
si queremos acceder a cada sección de nuestro esquema theme-1 y sus sub-mapas, 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.,
entonces, podemos acceder a las propiedades de cada mapa, digamos la propiedad background (bg), utilizando la función map-get:
map-get($map, bg)finalmente, combinando nuestro nuevo mixin, basado en nuestra estructura de mapa, podemos crear tantos temas como queramos:
tenga en cuenta que también estamos utilizando el @if directiva 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 manera, podemos agregar 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 estilos. 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, las funciones hsl como lighten o darken para calcular, por ejemplo, el color de un botón al pasar el cursor sobre él.
Podemos modificar el código del botón para aligerar su fondo al flotar, independientemente del color de fondo original. De esta manera, no tenemos que añadir 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 estilos 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 colocaran en el proyecto como:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Si está interesado en aprender más sobre el uso de Sass para secar su CSS, su compañero Toptaler Justin Brazeau y Sass enthusiast discuten esto en su brillante artículo Sass Mixins: Keep Your Stylesheets DRY.