Organización de Archivos Sass para Proyectos Escalables
A veces resulta complicado escribir todo el código en un solo archivo. Sass permite dividir el código en diferentes archivos y carpetas. Esto facilita el mantenimiento y la refactorización del código.
carpeta sass
La primera tarea consiste en crear la carpeta sass en la raíz del proyecto. De este modo, se indica al compilador que se utiliza Sass en el proyecto.
organización de la carpeta sass
En la carpeta sass:
- Creamos el archivo
main.scss. Es el archivo principal para el compilador. Conectaremos todos los fragmentos a este archivo con la ayuda de la directiva@import; - Creamos diferentes carpetas para los parciales de sass. (por ejemplo, la carpeta
utilitiespara variables, la carpetacomponentspara los estilos repetitivos de algunos elementos, la carpetabasepara los estilos globales y el reseteo del comportamiento predeterminado de los elementos, y la carpetalayoutspara los estilos no repetitivos).
parciales
Ahora estamos listos para agregar archivos y escribir algo de código sass para aplicar los estilos a los elementos. Para mantener la estructura, creamos un archivo para cada característica. El nombre del archivo debe comenzar con el guion bajo (_). Para el compilador, esto significa que no es el archivo principal. Es un parcial.
Toda la estructura está lista. Podemos importar todos los archivos al archivo main.scss con la ayuda de la directiva @import. El orden es esencial. Por ejemplo, si queremos usar algunas variables del archivo _variables.scss en el archivo _button.scss, entonces debemos mantener la importación del archivo _variables.scss por encima de la importación del archivo _button.scss dentro del archivo main.scss.
La sintaxis para importar el archivo es la siguiente. Usamos @import y comillas dobles ("") para especificar la ruta correcta al archivo.
@import "path";
El contenido resultante en el archivo main.scss es el siguiente:
@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";
Nota
Hemos considerado los conceptos básicos del preprocesador sass que nos permite utilizarlo en proyectos. Sin embargo, cualquier preprocesador cuenta con una gran cantidad de características diferentes. Cubrir todas ellas no forma parte del objetivo de este curso.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you explain what a Sass partial is and why the filename starts with an underscore?
How does the folder structure help in organizing large Sass projects?
Can you show an example of how to use variables from one partial in another?
Awesome!
Completion rate improved to 2.04Organización de Archivos Sass para Proyectos Escalables
Desliza para mostrar el menú
A veces resulta complicado escribir todo el código en un solo archivo. Sass permite dividir el código en diferentes archivos y carpetas. Esto facilita el mantenimiento y la refactorización del código.
carpeta sass
La primera tarea consiste en crear la carpeta sass en la raíz del proyecto. De este modo, se indica al compilador que se utiliza Sass en el proyecto.
organización de la carpeta sass
En la carpeta sass:
- Creamos el archivo
main.scss. Es el archivo principal para el compilador. Conectaremos todos los fragmentos a este archivo con la ayuda de la directiva@import; - Creamos diferentes carpetas para los parciales de sass. (por ejemplo, la carpeta
utilitiespara variables, la carpetacomponentspara los estilos repetitivos de algunos elementos, la carpetabasepara los estilos globales y el reseteo del comportamiento predeterminado de los elementos, y la carpetalayoutspara los estilos no repetitivos).
parciales
Ahora estamos listos para agregar archivos y escribir algo de código sass para aplicar los estilos a los elementos. Para mantener la estructura, creamos un archivo para cada característica. El nombre del archivo debe comenzar con el guion bajo (_). Para el compilador, esto significa que no es el archivo principal. Es un parcial.
Toda la estructura está lista. Podemos importar todos los archivos al archivo main.scss con la ayuda de la directiva @import. El orden es esencial. Por ejemplo, si queremos usar algunas variables del archivo _variables.scss en el archivo _button.scss, entonces debemos mantener la importación del archivo _variables.scss por encima de la importación del archivo _button.scss dentro del archivo main.scss.
La sintaxis para importar el archivo es la siguiente. Usamos @import y comillas dobles ("") para especificar la ruta correcta al archivo.
@import "path";
El contenido resultante en el archivo main.scss es el siguiente:
@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";
Nota
Hemos considerado los conceptos básicos del preprocesador sass que nos permite utilizarlo en proyectos. Sin embargo, cualquier preprocesador cuenta con una gran cantidad de características diferentes. Cubrir todas ellas no forma parte del objetivo de este curso.
¡Gracias por tus comentarios!
