css - How to import only variables and mixins from a Sass module -
i have use case have sass module needs use variable other module. problem @import
-ing first module copy rules module declares, while i'm interested in getting variable. example of situation in bottom code.
i know move variable shared partial, don't approach in situations variable belongs module (e.g. $button-width
belongs buttons.scss
module) because:
- it means splitting module code multiple files, modularization aiming rid of.
- it makes harder find variable located (there no logic behind if variable declared in module or in globally shared file).
- it clutters shared partials (
_shared.scss
in case) i'd rather use share global code used in many places , not belonging particular modules (like colors, main font sizes etc.), rather hack share module-specific variable used 2 modules. - enhances maintenance costs - means moving variable module share partial when other modules wants use it, moving inside module, when no other module needs use it.
question: approaches solve problem, allow me keep variable inside module?
extra question: postcss allows solve problem somehow easier?
thought: nice if sass added mechanisms import particular variables/mixins module, @import {$variablea} "modulea"
.
_shared.scss
$font-size: 15px; $color-black: #0f2000;
_modulea.scss
@import "shared"; /* variable needs used in other module. */ $specificvariablea: 2px; .selectora { padding-left: $specificvariablea; color: $color-black; }
_moduleb.scss
/* `import` problem, because output `.selectora { ... }`. */ @import "shared"; @import "modulea"; .selectorb { padding-left: $specificvariablea + 10px; color: $color-black; font-size: $font-size; }
styles.scss
/* main stylesheet importing modules. */ @import "modulea"; @import "moduleb";
Comments
Post a Comment