fix(scss): Add margin at new breakpoint even if it is 0. Closes #23.

Author: seejamescode

examples/bootstrap/css-gridish/bootstrap-grid.sketch

@@ -270,6 +270,31 @@ body {
   height: 100vw;
   max-height: 100rem; }
 
+.bootstrap-container {
+  padding-left: 0;
+  padding-right: 0; }
+
+.bootstrap-grid.bootstrap-grid--bleed {
+  margin-left: -0;
+  margin-right: -0;
+  padding-left: 0;
+  padding-right: 0;
+  width: 100vw; }
+
+.bootstrap-grid--bleed--left {
+  padding-left: 0;
+  margin-left: -0; }
+
+.bootstrap-grid--bleed--right {
+  padding-right: 0;
+  margin-right: -0; }
+
+@supports (display: grid) {
+  .bootstrap-grid__break--left {
+    margin-left: -0; }
+  .bootstrap-grid__break--right {
+    margin-right: -0; } }
+
 .bootstrap-padding {
   padding: calc(30px / 2); }
 
@@ -343,6 +368,26 @@ body {
     display: none; }
   [class*="bootstrap-grid__col--"] {
     min-width: 0; }
+  .bootstrap-container {
+    padding-left: 0;
+    padding-right: 0; }
+  .bootstrap-grid.bootstrap-grid--bleed {
+    margin-left: calc((100vw - 100rem) / -2 - 0);
+    margin-right: calc((100vw - 100rem) / -2 - 0);
+    padding-left: calc((100vw - 100rem) / -2 * -1 + 0);
+    padding-right: calc((100vw - 100rem) / -2 * -1 + 0);
+    width: 100vw; }
+  .bootstrap-grid--bleed--left {
+    padding-left: 0;
+    margin-left: -0; }
+  .bootstrap-grid--bleed--right {
+    padding-right: 0;
+    margin-right: -0; }
+  @supports (display: grid) {
+    .bootstrap-grid__break--left {
+      margin-left: -0; }
+    .bootstrap-grid__break--right {
+      margin-right: -0; } }
   .bootstrap-padding {
     padding: calc(30px / 2); }
   .bootstrap-padding--bottom {

examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css

@@ -81,6 +81,31 @@ body {
 .bootstrap-grid__col--sm--12 {
   grid-column: span 12; }
 
+.bootstrap-container {
+  padding-left: 0;
+  padding-right: 0; }
+
+.bootstrap-grid.bootstrap-grid--bleed {
+  margin-left: -0;
+  margin-right: -0;
+  padding-left: 0;
+  padding-right: 0;
+  width: 100vw; }
+
+.bootstrap-grid--bleed--left {
+  padding-left: 0;
+  margin-left: -0; }
+
+.bootstrap-grid--bleed--right {
+  padding-right: 0;
+  margin-right: -0; }
+
+.bootstrap-grid__break--left {
+  margin-left: -0; }
+
+.bootstrap-grid__break--right {
+  margin-right: -0; }
+
 .bootstrap-padding {
   padding: calc(30px / 2); }
 
@@ -152,6 +177,25 @@ body {
   .bootstrap-grid__col--xl--0,
   .bootstrap-grid__col--xl--0--only {
     display: none; }
+  .bootstrap-container {
+    padding-left: 0;
+    padding-right: 0; }
+  .bootstrap-grid.bootstrap-grid--bleed {
+    margin-left: calc((100vw - 100rem) / -2 - 0);
+    margin-right: calc((100vw - 100rem) / -2 - 0);
+    padding-left: calc((100vw - 100rem) / -2 * -1 + 0);
+    padding-right: calc((100vw - 100rem) / -2 * -1 + 0);
+    width: 100vw; }
+  .bootstrap-grid--bleed--left {
+    padding-left: 0;
+    margin-left: -0; }
+  .bootstrap-grid--bleed--right {
+    padding-right: 0;
+    margin-right: -0; }
+  .bootstrap-grid__break--left {
+    margin-left: -0; }
+  .bootstrap-grid__break--right {
+    margin-right: -0; }
   .bootstrap-padding {
     padding: calc(30px / 2); }
   .bootstrap-padding--bottom {