Dependiendo del tamaño del proyecto en el que esté trabajando, puede estructurar su código Sass de dos maneras: una simple para proyectos más pequeños y otra más compleja para proyectos más grandes. Sigue leyendo para saber cómo.
Sass: el brazo extendido de CSS; el factor de potencia que aporta elegancia a su código.
Con Sass, se trata de variables, anidamiento, mezclas, funciones, parciales, importaciones, herencia y directivas de control. Sass hace que su código sea más fácil de mantener y reutilizable.
Y ahora, le mostraré cómo hacer que su código sea más estructurado y organizado.
La organización de archivos y carpetas es crucial cuando los proyectos se expanden. Es necesario modularizar el directorio ya que la estructura de archivos aumenta significativamente. Esto significa que la estructuración está en orden. Aquí hay una manera de hacerlo.
- Dividir las hojas de estilo en archivos separados usando parciales
- Importe los parciales a la hoja de estilo maestra, que suele ser el archivo main.sass.
- Cree una carpeta de diseño para los archivos específicos del diseño
Tipos de estructuras Sass
Hay algunas estructuras diferentes que puede usar. Prefiero usar dos estructuras: una simple y otra más compleja. Echemos un vistazo.
Estructura simple
La estructura simple es conveniente para un proyecto pequeño como una sola página web. Para ese propósito, necesitas crear una estructura mínima. Aquí hay un ejemplo:
- _base.sass — contiene todos los reinicios, variables, mixins y clases de utilidad
- _layout.sass – todo el código Sass que maneja el diseño, que es el contenedor y los sistemas de cuadrícula
- _components.sass — todo lo que sea reutilizable: botones, barras de navegación, tarjetas, etc.
- _main.sass — el parcial principal debe contener solo las importaciones de los archivos ya mencionados
Otro ejemplo de la misma estructura simple es el siguiente:
- _core.sass — contiene variables, reinicios, mixins y otros estilos similares
- _layout.sass — están los estilos para el encabezado, el pie de página, el sistema de cuadrícula, etc.
- _components.sass — estilos para cada componente necesario para ese proyecto, incluidos botones, modales, etc.
- _app.sass — importaciones
Este es el que suelo usar para proyectos más pequeños. Y cuando se trata de tomar una decisión sobre qué tipo de estructura se utilizará, el tamaño del proyecto suele ser el factor decisivo.
¿Por qué utilizar esta estructura?
Hay varias ventajas por las que debe utilizar esta estructura organizativa. En primer lugar, los archivos CSS se almacenan en caché y, al hacerlo, se reduce la necesidad de descargar un nuevo archivo para cada nueva visita a la página. De esta forma, las solicitudes HTTP también disminuyen.
En segundo lugar, esta estructura es mucho más fácil de mantener ya que solo hay un archivo.
En tercer lugar, los archivos CSS se pueden comprimir y así disminuir su tamaño. Para un mejor resultado, se recomienda usar Sass/Less y luego realizar la concatenación y minificación de los archivos.
En caso de que los archivos se desorganicen, deberá expandir la estructura. En tal caso, puede agregar una carpeta para los componentes y dividirla en archivos individuales. Si el proyecto se amplía y es necesario reestructurar toda la estructura de Sass, considere el siguiente patrón más complejo.
La estructura modelada 7-1
El nombre de esta estructura proviene de 7 carpetas, 1 archivo. Muchos utilizan esta estructura, ya que se considera una buena base para proyectos de mayor envergadura. Todo lo que necesita hacer es organizar los parciales en 7 carpetas diferentes, y un solo archivo (app.sass) debe ubicarse en el nivel raíz para manejar las importaciones. Aquí hay un ejemplo:
sass/ | |- abstracts/ | |- _mixins // Sass Mixins Folder | |- _variables.scss // Sass Variables | |- core/ | |- _reset.scss // Reset | |- _typography.scss // Typography Rules | |- components/ | |- _buttons.scss // Buttons | |- _carousel.scss // Carousel | |- _slider.scss // Slider | |- layout/ | |- _navigation.scss // Navigation | |- _header.scss // Header | |- _footer.scss // Footer | |- _sidebar.scss // Sidebar | |- _grid.scss // Grid | |- pages/ | |- _home.scss // Home styles | |- _about.scss // About styles | |- sections/ (or blocks/) | |- _hero.scss // Hero section | |- _cta.scss // CTA section | |- vendors/ (if needed) | |- _bootstrap.scss // Bootstrap | - app.scss // Main Sass file
En el Resumen parcial, hay un archivo con todas las variables, mixins y componentes similares.
los Centro parcial contiene archivos como tipografía, reinicios y código repetitivo, utilizados en todo el sitio web. Una vez que escribe este código, no hay más sobrescritura.
los Componentes parcial contiene estilos para todos los componentes que se crearán para un sitio web, incluidos botones, carruseles, pestañas, modales y similares.
los Diseño parcial tiene todos los estilos necesarios para el diseño del sitio, es decir, encabezado, pie de página.
los Paginas parcial contiene los estilos para cada página individual. Casi todas las páginas deben tener estilos específicos que se usarán solo para esa página en particular.
Para que cada sección sea reutilizable y el código sass sea fácilmente accesible, existe el Sección/Bloques parcial. Además, es importante tener este parcial para que no necesite buscar si el código en particular está en los archivos home.sass o about.sass en el parcial de Pages.
Es una buena idea poner cada sección en un archivo .sass separado. Por lo tanto, si tiene dos secciones de héroe diferentes, coloque el código en el mismo archivo para saber que allí puede encontrar el código para las dos secciones. Y si sigue este patrón, tendrá la mayoría de los archivos en esta carpeta.
los Vendedores parcial está destinado a marcos de trabajo de arranque, por lo que, si usa uno en su proyecto, cree este parcial.
Te recomiendo que uses app.sass como la carpeta principal. Así es como debería verse:
// Abstract files @import "abscracts/all"; // Vendor Files @import "vendor/bootstrap.scss"; // Core files @import "core/all"; // Components @import "components/all"; // Layout @import "layout/all"; // Sections @import "sections/all"; // Pages @import "pages/all";
En lugar de tener muchas importaciones en el archivo, cree un archivo all.sass en cada carpeta. Cada archivo all.sass debe contener todas las importaciones de esa carpeta y, para hacerlo más visible y comprensible, cree un archivo principal.
Organización
El mayor beneficio de esta estructura es la organización. Siempre sabe dónde verificar si necesita cambiar algo específico. Por ejemplo, si desea cambiar el espaciado en una Sección/Bloque, vaya directamente a la carpeta Secciones/Bloques. De esa forma, no necesita buscar en la carpeta para encontrar la clase en un archivo.
Facilitación
Cuando el código está estructurado, los procesos se facilitan rápidamente. Están optimizados y cada segmento del código tiene su propio lugar.
Ultimas palabras
Organizar el código es esencial para los desarrolladores y, junto con todas las demás habilidades, es la forma más efectiva de mejorar el funcionamiento del sitio. Y aunque existen múltiples formas de organización y distintas estrategias, optar por la sencillez te ayuda a evitar los peligrosos escollos. Y finalmente, no hay elección correcta o incorrecta ya que todo depende de las estrategias de trabajo del desarrollador.
Foto principal a través de Reshot.