How to overwrite default color SASS variables.

Forums Help and How To How to overwrite default color SASS variables.

This topic contains 6 replies, has 6 voices, and was last updated by  atalzabidi 8 hours, 16 minutes ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • How does one simply overwrite the default color variables? Say I want to change the $blue / $primary viable throughout all of the styling. Any insights or even efficient hacks would be helpful.

    emartinez
    Member

    It appears you can create a sass partial (file that starts with an underscore) but I am not sure if this simply creates a compiled CSS file that overrides the full bootstrap.css file variables, which works but is not the most efficient.

    There’s instructions, but they don’t go much into detail: https://bootstrapstudio.io/tutorials/writing-sass

    Twinstream
    Member

    So you can create a overide “theme” using sass in your Styles folder. Go to theming Bootstrap and read…
    https://getbootstrap.com/docs/4.2/getting-started/theming/

    It states that “Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.”

    So you must download and import the Sass folder files and folder structure to the Styles folder. I have a _underscore on all the files.
    Then the sass:

    $primary: #be0a0a;

    $theme-colors: (
    primary: $primary,
    );
    @import “bootstrap”;

    This will override (not replace) the Bootstrap Studio bootstrap.css file just like any other css file you include in styles. (It is a complete compiled custom bootstrap.css file).One could actually replace the main bootstrap.css file when project is completed or during testing after exporting. Everytime the Bootstrap version is updated you would probably want to update the sass folder to the new Bootstrap version also.

    I only offer this up as a “trial” for others to test. Could not recommend it for production until further testing.

    One thing I did notice is the downloaded css version of bootstrap (same version as Bootstrap Studio is using) is missing some -ms prefixes so its possible BS is running autoprefixer or some sort of postcss process on their file. Would appreciate any feedback …..

    Twinstream
    Member

    It’s kinda like finding a Gold Willy Wonka Ticket !

    Rutwin
    Member

    BS is running autoprefixer or some sort of postcss process on their file. Would appreciate any feedback …..

    Me too

    telemac
    Member

    Greetings,

    can we have a word from the dev on this, does this method of importing all the BS SASS framework into BS will interfere with look&feel/options/Animation tools? Do you validate this method, or does it have to be considered as a temporary solution or not valid?
    Maybe you are planning to had tools panel to edit the bootstrap variable in the future?

    atalzabidi
    Member

    Can we import bootstrap in our SASS files without the need to download bootstrap sass folder and include them in the bootstrap studio?
    We need to override the _variables bootstrap file.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.