Sass — Parte 3

En esta parte vamos a ver una sola herramienta de Sass, pero que se vuelve muy útil al momento de trabajar en sitios grandes o cuando trabajamos con otras personas. Aunque la podemos utilizar siempre y generará una estructura de archivos mucho más cómoda y legible.

Import

Import, que obviamente significa de “importar”, es una herramienta que vamos a utilizar para desmembrar nuestro interminable código Sass en diferentes archivos. No hay de que preocuparse, ya que todos nuestros archivos compilaran a la vez para escribir nuestro CSS final.

Para ser un poco más claro, vamos a seguir trabajando en nuestro main.scss, que siempre va a ser nuestro archivo principal, pero solo vamos a tener las reglas generales que afecten a todo el sitio. Luego, para cada sección, como podría ser nuestro header, el nav, el footer, una galería o nuestro formulario de contacto, vamos a tener un archivo de Sass por separado para cada cosa.

Esto nos va a permitir trabajar mucho más cómodos y enfocarnos mejor en el estilo de cada elemento o sección, trabajando con una porción de código mucho más pequeña.

Entonces…

¿Cómo utilizar el import?

Para utilizar el import en nuestro código Sass, vamos a tener que respetar la siguiente sintaxis.

@import ‘_archivo.scss’;

Esta línea de código la podemos poner en cualquier parte de nuestro main.scss, aunque idealmente va a ir al final de los estilos que haya escrito, y para mayor prolijidad, en el orden en que las diferentes secciones aparecen en nuestro sitio web. Por ejemplo:

Hacemos un archivo de Sass por sección y los importamos

Ahora bien, como podrán notar, comienzo todos los nombres de archivo que voy a importar con un guión bajo ( _ ). Esto es por dos razones. 
La primera y la más simple es porque se considera una buena práctica para diferenciar al main de los archivos importados. 
La segunda, y hay que prestarle especial atención, es que si no le ponemos el guión bajo al comienzo, hay una posibilidad de que Sass interprete este archivo como un archivo principal, generando un nuevo CSS, en lugar de escribir en el que le indicamos por consola.

Una vez con los archivos importados, usaríamos nuestro _header.scss para los estilos de nuestro header, el archivo _servicios.scss para nuestra sección de servicios, y así sucesivamente. E incluso podríamos desglosar dentro de cada sección.