Use of SASS Variables

Bootstrap Studio Help
1

Hello, Sorry, newbie to Bss (version 5.0.2) I create a file (style) theme.scss that contain $main-primary-color: green; and Apply When I try to use it in Styles ( eg : background-color: $main-primary-color; ) he don't recognize it. What I miss ?

Thank you. Jp

2

Just put it all in your theme.scss e.g.

   $main-primary-color: green;

    body{
        background-color: $main-primary-color;
    }
3

Oups, not very usefull.

Thanks.

4

Post a link to your site, or the .bsdesign file so we can look at it

5

You need to import the theme into your main style. For example, I usually create a file called "_variables.scss". The underscore is important! (Read "Partials" here: https://sass-lang.com/guide). Then I'd import that into my main scss file - NOT css file, but scss file!

STEPS:

  1. Create an empty project.
  2. Delete the default autogenerated "styles.css" file.
  3. Create a "_variables.scss" file - again, underscore is important!
  4. Put $main-primary-color: green; into the "_variables.scss" file.
  5. Create another file "styles.scss".
  6. At the top of the "styles.scss" file put @import 'variables'; - this will import the contents of the "_variables.scss" file.
  7. Now in the "styles.scss" file you can do body { background-color: $main-primary-color; }

Now you can define all sorts of variables in your "_variables.scss" file and use them in the "styles.scss" file.

1 Like
6

Hello

Is it possible to import the _variables.scss from Bootstrap foundation/core? This is the main source I need for my styles.scss.