Contenido del Curso
Advanced CSS Techniques
2. Posicionamiento de Artículo
6. Sitios web y aplicaciones adaptables/responsivos
Advanced CSS Techniques
Estructura de Carpeta-Archivo
A veces es difícil escribir todo el código en un solo archivo. Sass permite dividir el código en diferentes archivos y carpetas. Simplifica el soporte y la refactorización del código.
carpeta sass
Nuestra primera tarea es crear la carpeta sass en la raíz del proyecto. De esta forma permitimos que el compilador sepa que usamos 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 las variables, la carpetacomponentspara los estilos repetitivos de algunos elementos, la carpetabasepara los estilos globales y restablecer el comportamiento por defecto de los elementos, y la carpetalayoutspara los estilos no repetitivos).
parciales
Ahora, estamos listos para añadir archivos y escribir algo de código sass para dar los estilos a los elementos. Para mantener la estructura, creamos un archivo para cada característica. El nombre del archivo debe comenzar con el guión bajo (_). Para el compilador, significa que no es el archivo principal. Es 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 fichero _variables.scss en el fichero _button.scss, entonces tenemos que mantener la importación del fichero _variables.scss por encima de la importación del fichero _button.scss dentro del fichero main.scss.
La sintaxis para importar el archivo es la siguiente. Usamos @import, y comillas dobles ("") para especificar la ruta correcta al fichero.
``css
@import "ruta";
Nota
Hemos considerado lo básico del preprocesador sass que nos permite utilizarlo para proyectos. Sin embargo, cualquier preprocesador tiene una gran cantidad de características diferentes. Cubrirlas todas es diferente de la trama de este curso.
¿Todo estuvo claro?
Contenido del Curso
Advanced CSS Techniques
2. Posicionamiento de Artículo
6. Sitios web y aplicaciones adaptables/responsivos
Advanced CSS Techniques
Estructura de Carpeta-Archivo
A veces es difícil escribir todo el código en un solo archivo. Sass permite dividir el código en diferentes archivos y carpetas. Simplifica el soporte y la refactorización del código.
carpeta sass
Nuestra primera tarea es crear la carpeta sass en la raíz del proyecto. De esta forma permitimos que el compilador sepa que usamos 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 las variables, la carpetacomponentspara los estilos repetitivos de algunos elementos, la carpetabasepara los estilos globales y restablecer el comportamiento por defecto de los elementos, y la carpetalayoutspara los estilos no repetitivos).
parciales
Ahora, estamos listos para añadir archivos y escribir algo de código sass para dar los estilos a los elementos. Para mantener la estructura, creamos un archivo para cada característica. El nombre del archivo debe comenzar con el guión bajo (_). Para el compilador, significa que no es el archivo principal. Es 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 fichero _variables.scss en el fichero _button.scss, entonces tenemos que mantener la importación del fichero _variables.scss por encima de la importación del fichero _button.scss dentro del fichero main.scss.
La sintaxis para importar el archivo es la siguiente. Usamos @import, y comillas dobles ("") para especificar la ruta correcta al fichero.
``css
@import "ruta";
Nota
Hemos considerado lo básico del preprocesador sass que nos permite utilizarlo para proyectos. Sin embargo, cualquier preprocesador tiene una gran cantidad de características diferentes. Cubrirlas todas es diferente de la trama de este curso.
¿Todo estuvo claro?
