Cómo organizar los archivos Sass de tu proyecto

Diferentes propuestas para organizar las carpetas de tus archivos SASS

Image for post
Image for post

Empleando Partials

// Archivo: main.sass@import 'layout/header';
// File: _header.sass.the-header

// estilos del header

Una estructura sencilla

_base.sass
_layout.sass
_components.sass
/components
_buttons.sass
_jumbo.sass
main.sass

La regla del 7+1

sass/
|
|– utilities/
| |– _variables.sass // Variables
| |– _functions.sass // Funciones
| |– _mixins.sass // Mixins
|
|– base/
| |– _reset.sass // Reset/normalize
| |– _typo.sass // Tipografías
|
|– components
| |– _buttons.acss // Bot
| |– _jumbo.sass // Jumbo
|
|– layout/
| |– _navigation.sass // Navegación
| |– _grid.sass // Grid
| |– _header.sass // Header
| |– _footer.sass // Footer
| |– _forms.sass // Formularios
|
|– views/
| |– _home.sass // Estilos de la página de inicio
| |– _contact.sass // Estilos de la página de contacto
|
|– themes/
| |– _theme.sass // Default theme
| |– _admin.sass // Admin theme
|
|– vendors/
| |– _bootstrap.sass // Bootstrap
| |– _jquery-ui.sass // jQuery UI
|
|– main.sass // Archivo principal
@import 'utilities/variables';
@import 'utilities/functions';
@import 'utilities/mixins';

@import 'utilities/bootstrap';
@import 'vendors/jquery-ui';

@import 'base/reset';
@import 'base/typo';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/jumbo';

@import 'pages/home';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';

Conclusión

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store