Sass utilities Bootstrap 5?

General Questions
1

Hi @matjaz ,

I want to modify the opacity in a Bootstrap 5 project, but wonder where to add the Utility code like this in the sass file in Pinegrow? Thanks! David

 "opacity": (
      property: opacity,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        85: .85,
        90: .90,
        100: 1,
      )
    ),
2

@AllMediaLab to extend utilities, edit custom.scss and insert the following code before the line @import "bootstrap/bootstrap"

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/utilities";

$utilities: map-merge(
  $utilities,
  (
    "opacity": map-merge(
      map-get($utilities, "opacity"),
      (
        values: map-merge(
          map-get(map-get($utilities, "opacity"), "values"),
          (10: 0.1, 90: 0.9), //Add additional opacity values
        ),
      ),
    ),
  )
);

Then you can use opacity-10 and bg-opacity-10 in the project. Note, use Assign Class tool, as these values will not be available in the Properties panel controls.

1 Like
3

@matjaz Hi

Thanks! Is it an idea to add this to the custom.scss as a update?

David

4

No plans for that at the moment.