docs: add scss-docs

Author: mrholek

scss/_alert.scss

@@ -51,11 +51,12 @@
 
 
 // Alternate styles
-//
+// scss-docs-start alert-modifiers
 // Generate contextual modifier classes for colorizing the alert.
 
 @include theme-variant() {
   .alert-#{$color} {
     @include alert-variant( theme-color-level($value, $alert-bg-level),  theme-color-level($value, $alert-border-level),  theme-color-level($value, $alert-color-level));
   }
 }
+// scss-docs-end alert-modifiers

scss/_dropdown.scss

@@ -45,6 +45,7 @@
   margin: $dropdown-spacer 0 0; // override default ul
 }
 
+// scss-docs-start responsive-breakpoints
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -76,6 +77,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.

scss/_functions.scss

@@ -103,12 +103,14 @@
 //   @return mix($color-base, $color, $level * $theme-color-interval);
 // }
 
+// scss-docs-start color-level
 @function theme-color-level($color, $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
 
 // Return valid calc
 @function add($value1, $value2, $return-calc: true) {

scss/_list-group.scss

@@ -163,14 +163,14 @@
 
 
 // Contextual variants
-//
+// scss-docs-start list-group-modifiers
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
 @include theme-variant() {
   @include list-group-item-variant($color,  theme-color-level($value, -9),  theme-color-level($value, 6));
 }
-
+// scss-docs-end list-group-modifiers
 // List items with accent
 //
 // Remove top, bottome and right borders and border-radius.

scss/variables/_colors.scss

@@ -93,6 +93,7 @@ $dark:   $gray-800 !default;
 
 $pink:  #e83e8c !default;
 
+// scss-docs-start theme-colors-map
 $theme-colors: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $theme-colors: map-merge(
@@ -108,6 +109,7 @@ $theme-colors: map-merge(
   ),
   $theme-colors
 );
+// scss-docs-end theme-colors-map
 
 // Set a specific jump point for requesting color jumps
 $theme-color-interval:  8% !default;

scss/variables/_grid.scss

@@ -5,6 +5,7 @@
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
+// scss-docs-start grid-breakpoints
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
@@ -13,6 +14,7 @@ $grid-breakpoints: (
   xl: 1200px,
   xxl: 1400px
 ) !default;
+// scss-docs-end grid-breakpoints
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
@@ -22,13 +24,15 @@ $grid-breakpoints: (
 //
 // Define the maximum width of `.container` for different screen sizes.
 
+// scss-docs-start container-max-widths
 $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
   xl: 1140px,
   xxl: 1320px
 ) !default;
+// scss-docs-end container-max-widths
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 

scss/variables/_z-index.scss

@@ -3,6 +3,7 @@
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
 
+// scss-docs-start zindex-stack
 $zindex-dropdown:        1000 !default;
 $zindex-sticky:          1020 !default;
 $zindex-fixed:           1030 !default;
@@ -11,3 +12,4 @@ $zindex-modal:           1050 !default;
 $zindex-popover:         1060 !default;
 $zindex-tooltip:         1070 !default;
 $zindex-toaster:         1080 !default;
+// scss-docs-end zindex-stack