Skip to content
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.

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

Fix 'Remove from map' Sass description #36535

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

Conversation

julien-deramond
Copy link
Member

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

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
@julien-deramond julien-deramond added this to In progress in v5.2.0-stable via automation Jul 4, 2022
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!

v5.2.0-stable automation moved this from In progress to Reviewer approved Jul 11, 2022
@mdo mdo merged commit 5235f8e into main Jul 11, 2022
v5.2.0-stable automation moved this from Reviewer approved to Done 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 mdo approved these changes

Assignees
No one assigned
Labels
css docs v5
Projects
No open projects
v5.2.0-stable
  
Done
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