Dynamically re-import Sass partials after amending

问题:

I am working on a project utilizing Twitter Bootstrap pre-compiled with Sass.

Each time I override a variable, I have to re-import the _bootstrap.sass file to my project main stylesheet for the override to take effect.

Do you know of the way to make this process automatic so that, each time I amend a variable, it takes effect immediately?

To clarify further, this is my directory structure:

/project
  /custom-sass
    /boot.scss -> This is where _bootstrap.scss is imported
    /glob.scss
  /dev
    /bootstrap-sass
      /bootstrap
        /mixins
        /partial1.scss
        /partial2.scss
        /etc..
      /_bootstrap.scss -> This is the main Bootstrap Sass file that imports all partials.

When I override a variable directly in _variables.scss, and then re-import _bootstrap.scss with this directive: @import '../dev/bootstrap-sass/_bootstrap.scss in my boot.scss, the styles get updated.

However, I do not want to override variables directly in _variables.scss. Moreover, I do not want to be forced to re-import _bootstrap.scss in my main style sheet each time I make a change.

回答1:

There is no language that will do what you're suggesting. If you specify $margin: 10px and then run some code that uses that variable, you can't change it to 20px and expect it to retroactively change the results of code that's already been run.

If you want $margin: 20px, then you specify it that way before you run the procedures (mixins, imports, etc.) that depends on it. In other words, move your Bootstrap imports so that they are after you set your variables.