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

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -