Skip to content
GitLab

Fix 'Remove from map' Sass description

Merged Julien Déramond requested to merge main-jd-fix-sass-remove-from-map-example into main

Fixes #36534 (closed)

This PR proposes to fix #36534 (closed) by modifying the Scss example and the associated description (not very inspired, could maybe be improved).

Maybe $theme-colors is not representative enough of what's this section is trying to explain. Do we need to find another example based on another map?

Live preview

How to test it locally:

mkdir test && cd test
npm i bootstrap@5.2.0-beta1 sass
// styles.scss
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
@import "./node_modules/bootstrap/scss/maps";
@import "./node_modules/bootstrap/scss/mixins";
@import "./node_modules/bootstrap/scss/root";
@import "./node_modules/bootstrap/scss/utilities";
@import "./node_modules/bootstrap/scss/reboot";
@import "./node_modules/bootstrap/scss/helpers";
@import "./node_modules/bootstrap/scss/utilities/api";
# Generate styles.css
./node_modules/.bin/sass styles.scss:styles.css
<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="bg-info">test</div>
    <div class="bg-warning">test</div>
  </body>
</html>

If the modification of $theme-colors is done after root you'll observe a blue div. If it is done at the right place between variables and maps, only the yellow div will be displayed.