Skip to content

Fix 'Remove from map' Sass description #36535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 11, 2022
Merged

Fix 'Remove from map' Sass description #36535

merged 1 commit into from
Jul 11, 2022
+4 −3

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Jun 9, 2022 •
edited
Loading

Fixes #36534

This PR proposes to fix #36534 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.

@julien-deramond julien-deramond requested a review from a team June 9, 2022 16:17
@julien-deramond julien-deramond mentioned this pull request Jun 9, 2022
Closed
3 tasks
mdo
mdo approved these changes Jul 11, 2022
View reviewed changes
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@mdo mdo merged commit 5235f8e into main Jul 11, 2022
@mdo mdo deleted the main-jd-fix-sass-remove-from-map-example branch July 11, 2022 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mdo mdo

Assignees
No one assigned
Labels
css docs v5
Projects
No open projects
v5.2.0-stable
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

customize/sass.md doc doubt/typo?
2 participants
@julien-deramond @mdo