diff --git a/.eslintrc b/.eslintrc
index 22f0370c1..ae6f86a44 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -11,6 +11,7 @@
     "linebreak-style": "off",
     "func-names": ["error", "as-needed"],
     "prefer-arrow-callback": "warn",
+    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
     "no-multi-assign": "warn",
     "no-param-reassign": "off",
     "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
diff --git a/examples/styles/core/mixins.scss b/examples/styles/core/mixins.scss
index ebe1a972d..70b29c475 100644
--- a/examples/styles/core/mixins.scss
+++ b/examples/styles/core/mixins.scss
@@ -1,24 +1,21 @@
-@mixin onepx($positions: top right bottom left, $border-color: #ddd, $radius: 0) {
+@mixin onepx($positions: top right bottom left, $border-color: #ddd, $border-radius: 0) {
   &:after {
     content: '';
     pointer-events: none;
-    box-sizing: border-box;
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
-    border-radius: $radius;
-    border: 1px solid $border-color;
-    border-width: 0;
+    border-radius: $border-radius;
     @each $position in $positions {
-      border-#{$position}-width: 1px;
+      border-#{$position}: 1px solid $border-color;
     }
 
     @media only screen and (-webkit-min-device-pixel-ratio: 2) {
       width: 200%;
       height: 200%;
-      transform: scale(0.5);
+      transform: scale(0.5, 0.5);
       transform-origin: 0 0;
     }
   }