Create `scss-docs` shortcode to get some snippets from the Scs… (#30502)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

7 files changed, 17 insertions, 3 deletions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 45d6218065..19157b2981 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -40,8 +40,7 @@
 }
 
 
-// Alternate styles
-//
+// scss-docs-start alert-modifiers
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $color, $value in $theme-colors {
@@ -49,3 +48,4 @@
     @include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
   }
 }
+// scss-docs-end alert-modifiers
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 3290f22cbb..b30f2ba7ec 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -34,6 +34,7 @@
   @include box-shadow($dropdown-box-shadow);
 }
 
+// scss-docs-start responsive-breakpoints
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -49,6 +50,7 @@
     }
   }
 }
+// scss-docs-end responsive-breakpoints
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 // Just add .dropup after the standard .dropdown class and you're set.
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 00179049c1..49a4604660 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -128,12 +128,14 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 
 // Request a color level
+// scss-docs-start color-level
 @function color-level($color: $primary, $level: 0) {
   $color-base: if($level > 0, $black, $white);
   $level: abs($level);
 
   @return mix($color-base, $color, $level * $theme-color-interval);
 }
+// scss-docs-end color-level
 
 @function tint-color($color, $level) {
   @return mix(white, $color, $level * $theme-color-interval);
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 8513cdd9d1..7378a14b81 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -145,7 +145,8 @@
 }
 
 
-// Contextual variants
+// scss-docs-start list-group-modifiers
+// List group contextual variants
 //
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
@@ -153,3 +154,4 @@
 @each $color, $value in $theme-colors {
   @include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level));
 }
+// scss-docs-end list-group-modifiers
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 66f7357b0f..6f9abfa387 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -341,6 +341,7 @@ $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 $transition-collapse:         height .35s ease !default;
 
+// scss-docs-start embed-responsive-aspect-ratios
 $embed-responsive-aspect-ratios: (
   "21by9": (
     x: 21,
@@ -359,6 +360,7 @@ $embed-responsive-aspect-ratios: (
     y: 1
   )
 ) !default;
+// scss-docs-end embed-responsive-aspect-ratios
 
 // Typography
 //
@@ -774,6 +776,7 @@ $form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://w
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 
+// scss-docs-start form-validation-states
 $form-validation-states: (
   "valid": (
     "color": $form-feedback-valid-color,
@@ -784,6 +787,7 @@ $form-validation-states: (
     "icon": $form-feedback-icon-invalid
   )
 ) !default;
+// scss-docs-end form-validation-states
 
 // Z-index master list
 //
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index d15e20899e..acd68f2ed6 100644
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -5,6 +5,8 @@
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server-side validation.
 
+// scss-docs-start form-validation-states-loop
 @each $state, $data in $form-validation-states {
   @include form-validation-state($state, map-get($data, color), map-get($data, icon));
 }
+// scss-docs-end form-validation-states-loop
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index 11a977b737..ffc62bb285 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,3 +1,4 @@
+// scss-docs-start clearfix
 @mixin clearfix() {
   &::after {
     display: block;
@@ -5,3 +6,4 @@
     content: "";
   }
 }
+// scss-docs-end clearfix