How to use custom scss files

[djayko]

Hello,

I'm struggling in correct handling. Maybe someone can explain how it would be correct.

What I want to achieve:
creation of additional aspect-ratios in bootstrap 5 template.

Like: class="ratio ratio-5x7"

scss-code

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%),
  "5x7": calc(7 / 5 * 100%),
  "4x5":calc(5 / 4 * 100%)
) !default;

What I tried:

• creation of custom.scss in templates/astroid-template-zero/scss/custom/custom.scss
• changing the original _variables.scss in /templates/astroid-template-zero/scss/zero/_variable.scss
  I deleted astroid cache, clicked save button in addition, but nothing happens.

Questions

• Do I have to create additional classes anywhere to use this new ratio classes?
• How can I force that scss will be compiled to CSS?

best,
Frank

[Chacapamac]

How this is use ?
You got one variable that can have multiple possibility?

I find this —> https://getbootstrap.com/docs/5.0/helpers/ratio/
Here about custom ratio —> https://boosted.orange.com/docs/5.0/helpers/ratio/

Also if you want to override the astroid/assets/vendor/bootstrap/css_variables.css you maybe have to add the !important or add it directly to the original file (not sure here...)

[djayko]

@Chacapamac
I'm aware of that bootstrap documentation and I would like to extend the class options by using scss-variable and extend it.

Main issue, how to get the variables at the right place for css compiling.

Of course, using css directly and creating separtely new class could be an workaround option. But maybe it's a general issue within astroid using SCSS/Sass for CSS creation? I'm not sure.

[Chacapamac]

I think you will have to change the variable file itself...
It will be great if we can have an override of it in Astroid that is not overwrite at each core modification.

[djayko]

Already tried by changing the _variables.scss within zero template. Without any success.

[Chacapamac]

This is weird?
Logically it should work if you put it in the variable files as bootstrap 5 says:

Sass map
Within _variables.scss, you can change the aspect ratios you want to use.
Here’s our default $ratio-aspect-ratios map. Modify the map as you like and recompile your Sass to put them to use.

My questions will be are you using the right call like (I’m not sure how you are using it)

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>

Or are you sure your cache compiled files and browsers/cache history are empty before trying

Putting Astroid plugin in “Debug” mode is great for that as any refresh flush the cache compiled files.