Dar estilo a React usando Sass

❮ Anterior Próximo ❯

que es sass

Sass es un preprocesador de CSS.

Los archivos Sass se ejecutan en el servidor y envían CSS al navegador.

Puede obtener más información sobre Sass en nuestro Tutorial de Sass .

¿Puedo usar Sass?

Si usa el create-react-appen su proyecto, puede instalar y usar fácilmente Sass en sus proyectos de React.

Instale Sass ejecutando este comando en su terminal:

>npm i sass

¡Ahora está listo para incluir archivos Sass en su proyecto!

Crear un archivo Sass

Cree un archivo Sass de la misma manera que crea archivos CSS, pero los archivos Sass tienen la extensión de archivo .scss

En los archivos Sass puede usar variables y otras funciones Sass:

mi-sass.scss:

Crea una variable para definir el color del texto:

$myColor: red;

h1 {
  color: $myColor;
}

Importe el archivo Sass de la misma manera que importó un archivo CSS:

índice.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));