React Sass

Sass (Syntactically Awesome Stylesheets) es un preprocesador de CSS.

Sass te permite utilizar características que aún no existen en CSS, como variables, reglas anidadas, mixins, funciones, etc.

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

Puedes, en nuestroTutorial de Sassaprender más sobre Sass.

Instalar Sass

Ejecuta el siguiente comando en la terminal para instalar Sass:

npm i sass

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

Crear un archivo Sass

La forma de crear un archivo Sass es la misma que la de crear un archivo CSS, pero la extensión de los archivos Sass es.scss。

En los archivos Sass, puedes usar variables y otras características de Sass.

Ejemplo

Crea una variable para definir el color del texto:

Código del archivo my-sass.scss:

my-sass.scss

$myColor: red;

h1 {
  color: $myColor;
}

Importa archivos Sass de la misma manera que importas archivos CSS:

Ejemplo

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

En el código anterior, creamos un archivo Sassmy-sass.scss, y en él usamos una variable Sass$myColorpara definirh1el color. Luego, nosotrosindex.jsimportamos este archivo Sass como importamos un archivo CSS normal, y enHeaderel componente usamos estos estilos.

Otras extensiones