How to overwrite default color SASS variables.

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

This topic contains 3 replies, has 3 voices, and was last updated by  Twinstream 2 weeks, 2 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #13736

    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.

    #13816
    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

    #13828
    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 …..

    #13830
    Twinstream
    Member

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

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

You must be logged in to reply to this topic.