After reading through the Bootstrap introduction [1], I added the following code snippet to my .html file:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
While inspecting the sources using Chrome Dev Tools, I stumbled upon a .scss file named
. It contains the following code snippet which I am trying to comprehend:https://stackpath.bootstrapcdn.com/bootstrap/scss/_root.scss
// Make sure to update getting-started/theming.md!
:root {
// Only use SassScript inside `#{}` for custom variable values.
@each $color, $value in $colors {
--#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$color}: #{$value};
}
@each $bp, $value in $grid-breakpoints {
--breakpoint-#{$bp}: #{$value};
}
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)};
}
This snippet generates the following set of CSS variables:
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
What I comprehend:
- The usage of '$' denotes a
scssvariable. @eachis a part ofscsssyntax used for iterating over lists [2]- The '--' prefix signifies a
cssvariable :rootis equivalent to thehtmlelement
What puzzles me:
- Where exactly are
$colors,$theme-colors, and$grid-breakpointsdefined? - What is the functionality of the
scsssyntax#{$color}and similar expressions?- For instance, in the statement
--#{$color}: #{$value};
- For instance, in the statement