Configuración del proyecto SASS: mixins que dependen de otros mixins

0

Organizo mis archivos sass (scss) de la manera que se describe aquí ...

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

Entiendo el propósito de diferenciar parciales y módulos : css de salida parcial, mientras que los módulos definen mixins, variables, etc.que se reutilizan más fácilmente.

Mi pregunta: ¿Qué pasa si quiero escribir un módulo que usa mixins de otro módulo? Por ejemplo, tengo un módulo que define un mixin para consultas de medios. Tengo otro módulo que define un mixin para escalar errores tipográficos de manera receptiva (ajustando la altura de la línea, el tamaño de la fuente, etc.). Quiero que este último use mi mixin sensible, pero no quiero copiar / pegar el primer módulo en el segundo. ¿Debo simplemente @importar el primero al segundo? ¿Cuál es la mejor práctica para esto?

1

Cualquiera que sea el archivo de dependencia, lo importaría primero.

Me gusta mantener mi estructura bastante plana y solo importar todo en un archivo main.scss.

@import "variables";
@import "base-classes";
@import "mixins";

@import "fonts";
@import "typography";

@import "elements";

@import "layouts/spree_application";

@import "orders";

@import "products/show";

@import "shared/breadcrumbs";
@import "shared/feed";
@import "shared/footer";
@import "shared/header";
@import "shared/subscribe";
@import "shared/taxonomies";

// Checkout pages
@import "checkout/edit";
@import "checkout/summary";

@import "checkout/delivery";
@import "checkout/payment";
@import "checkout/confirm";

// Pages
@import "lookbooks";

@import "news/index";
@import "news/show";

@import "stockists";
@import "surfclub";
@import "about";
@import "returnsexchanges";
1
  • Tengo entendido que los módulos están destinados a ser reutilizables. Por esta razón, estoy buscando una forma de manejar la dependencia para que las cosas no se rompan más tarde si quiero usar un módulo pero no el otro. ¿Tiene sentido? Tu respuesta no resuelve mi problema. Es lo que estoy haciendo ahora y está perfectamente bien dentro del alcance de un solo proyecto. Pero estoy buscando una solución a largo plazo que evite el acoplamiento tanto como sea posible. 21/06/2014 a las 22:40