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.
Cómo usar Sass en su proyecto React.js
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 ejecutando npm --versión o hilo --versión. Si no ve un número de versión en su terminal, instalar npm o hilo primero.
Crear un proyecto React.js
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. Entonces corre npx crear-reaccionar-aplicación . Una vez que finalice el proceso, ingrese al directorio de la aplicación usando cd . Agregue el siguiente contenido a su Aplicación.js archivo como iniciador:
importar Reaccionar de "reaccionar";
importar "./Aplicación.scss";
funciónaplicación() {
devolver (
<div className="envoltura">
<h1>Usando Sass en React</h1>
<encabezado className="envoltorio__btns">
<botón>Botón azul</button>
<botón>Botón rojo</button>
<botón>Botón verde</button>
</header>
</div> );
}
exportarpor defecto aplicación;Una vez que haya configurado un proyecto React básico, es hora de integrar Sass.
Instalar Sass
Puede instalar Sass a través de npm o yarn. Instálelo a través de yarn ejecutando hilo añadir sass o, si prefiere npm, ejecute npm instalar sass. Su administrador de paquetes agregará la última versión de Sass a la lista de dependencias en el proyecto paquete.json archivo.
Cambiar el nombre de los archivos .css a .scss o .sass
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:
importar "./index.scss";
importar "./Aplicación.scss";De ahora en adelante, debe usar la extensión .scss para cualquier archivo de estilo que cree.
Importación y uso de variables y mixins
Uno de los más significativos ventajas 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 nueva Estilos carpeta en tu origen carpeta. En la carpeta Estilos, cree dos archivos: _variables.scss y _mixins.scss. Agregue las siguientes reglas a _variables.scss:
$color-de-fondo: #f06292;
$texto-color: #f1d3b3;
$btn-ancho: 120píxeles;
$btn-altura: 40píxeles;
$bloque-relleno: 60píxeles;Y agregue lo siguiente a _mixins.scss:
@mixin lista vertical {
pantalla: flexible;
alinear elementos: centro;
dirección de flexión: columna;
}Luego importe variables y mixins en App.scss de la siguiente manera:
@importar "./Estilos/variables";
@importar "./Estilos/mezclas";Use sus variables y mixins en el archivo App.scss:
@importar "./Estilos/variables.scss";
@importar "./Estilos/mezclas";
.envoltura {
color de fondo: $color-de-fondo;
color: $texto-color;
relleno: $bloque-relleno;&__btns {
@incluir vertical-lista;
botón {
ancho: $btn-ancho;
altura: $btn-altura;
}
}
}
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.
Usando Sass en React.js
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.
