Cómo usar Sass en React

Sass es una versión mejorada de CSS que puedes usar en tus proyectos de React ahora mismo.

Sass (hojas de estilo sintácticamente asombrosas) es una extensión de CSS con características adicionales que lo hacen más poderoso. Lo mejor de Sass es su compatibilidad con CSS, lo que significa que puede usarlo en sus proyectos de desarrollo web con marcos de JavaScript como React.

Sin embargo, a diferencia de Vanilla CSS, necesita un poco de configuración para usar Sass. Descubra cómo funciona configurando un proyecto React.js simple e integrando Sass con él.

Al igual que otros procesadores CSS, Sass no es compatible de forma nativa con React. Para usar Sass en React, debe instalar una dependencia de terceros a través de un administrador de paquetes como yarn o npm.

Puede verificar si npm o yarn están instalados en su máquina local ejecutandonpm --versiónohilo --versión . Si no ve un número de versión en su terminal, primero instale npm o yarn.

Para seguir esta guía, puede configurar una aplicación React.js simple usando create-react-app.

Primero, use una línea de comando para navegar a la carpeta en la que desea crear su proyecto React. Luego ejecutenpx create-react-app . Una vez que finalice el proceso, ingrese al directorio de la aplicación usandocd . Agregue el siguiente contenido a suAplicación.jsarchivo como iniciador:

Una vez que haya configurado un proyecto React básico, es hora de integrar Sass.

Puede instalar Sass a través de npm o yarn. Instálelo a través de yarn ejecutandohilo añadir sasso, si prefiere npm, ejecutenpm instalar sass . Su administrador de paquetes agregará la última versión de Sass a la lista de dependencias en el proyectopaquete.jsonarchivo.

En la carpeta del proyecto, cambie el nombre de App.css e index.css a App.scss e index.scss, respectivamente.

Después de cambiar el nombre de esos archivos, debe actualizar las importaciones en sus archivos App.js e index.js para que coincidan con las nuevas extensiones de archivo de la siguiente manera:

De ahora en adelante, debe usar la extensión .scss para cualquier archivo de estilo que cree.

Una de las ventajas más significativas de Sass es que te ayuda a escribir estilos limpios y reutilizables usando variables y mixins. Si bien puede no ser evidente cómo puede hacer lo mismo en React, no es tan diferente de usar Sass en proyectos escritos con JavaScript y HTML sin formato.

Primero, crea una nuevaEstiloscarpeta en tuorigen carpeta. En la carpeta Estilos, cree dos archivos:_variables.scssy_mixins.scss . Agregue las siguientes reglas a _variables.scss:

Y agregue lo siguiente a _mixins.scss:

Luego importe variables y mixins en App.scss de la siguiente manera:

Use sus variables y mixins en el archivo App.scss:

Así es como usas variables y mixins en React. Además de mixins y variables, también puede usar todas las otras características increíbles en Sass, como funciones. No hay limitación.

Sass proporciona más funciones además de CSS, que es exactamente lo que necesitará para escribir código CSS reutilizable.

Puede comenzar a usar Sass en React instalando el paquete sass a través de npm o yarn, actualizando sus archivos CSS a .scss o .sass y luego actualizando sus importaciones para usar la nueva extensión de archivo. Después de eso, puede comenzar a escribir SCSS en React.

Alvin Wanjala es escritor sénior para Android en MakeUseOf y desarrollador de software. Como ávido usuario de Android que se enamoró del ecosistema después de obtener su primer dispositivo en 2013, se enfoca en ayudar a los usuarios a aprovechar al máximo sus dispositivos. Pero al ser un entusiasta de la tecnología que usa múltiples plataformas a diario, también cubre iOS, Mac, redes sociales y otros temas en el amplio espectro de la tecnología de consumo. Alvin comenzó a escribir en 2018 en su blog de tecnología personal y profesionalmente en 2019 en TechTrendsKE, donde cubrió noticias de tecnología general y reseñas de productos. Desde entonces, su trabajo ha aparecido en XDA Developers y varios otros sitios web de tecnología. Además de escribir, está estudiando para obtener una segunda licenciatura en TI, centrándose en el desarrollo de software.