Extract margin variables and mixins into separate file.

themes/vanilla/assets/scss/margin.scss

@@ -0,0 +1,38 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+$margin-width: 30rem;
+$margin-offset: 1.5rem;
+
+@mixin below-two-margins {
+    @media screen and
+        (max-width: $container-width +
+            2 * ($margin-width + 2 * $margin-offset)) {
+        @content;
+    }
+}
+
+@mixin below-one-margin {
+    @media screen and
+        (max-width: $container-width +
+            ($margin-width + 3 * $margin-offset)) {
+        @content;
+    }
+}
+
+@mixin margin-content {
+    display: block;
+    position: absolute;
+    width: $margin-width;
+    box-sizing: border-box;
+}
+
+@mixin margin-content-left {
+    left: 0;
+    margin-left: -($margin-width + $margin-offset);
+}
+
+@mixin margin-content-right {
+    right: 0;
+    margin-right: -($margin-width + $margin-offset);
+}

themes/vanilla/assets/scss/sidenotes.scss

@@ -1,28 +1,12 @@
 @import "variables.scss";
 @import "mixins.scss";
+@import "margin.scss";
 
-$sidenote-accommodate-shrink: 10rem;
 $sidenote-width: 30rem;
 $sidenote-offset: 1.5rem;
 $sidenote-padding: 1rem;
 $sidenote-highlight-border-width: .2rem;
 
-@mixin below-two-sidenotes {
-    @media screen and
-        (max-width: $container-width +
-            2 * ($sidenote-width + 2 * $sidenote-offset)) {
-        @content;
-    }
-}
-
-@mixin below-one-sidenote {
-    @media screen and
-        (max-width: $container-width +
-            ($sidenote-width + 3 * $sidenote-offset)) {
-        @content;
-    }
-}
-
 .sidenote {
     &:hover {
         .sidenote-label {
@@ -48,25 +32,19 @@ $sidenote-highlight-border-width: .2rem;
 }
 
 .sidenote-content {
-    display: block;
-    position: absolute;
-    width: $sidenote-width;
+    @include margin-content;
+    @include bordered-block;
     margin-top: -1.5rem;
+    padding: $sidenote-padding;
+    text-align: left;
 
     &.sidenote-right {
-        right: 0;
-        margin-right: -($sidenote-width + $sidenote-offset);
+        @include margin-content-right;
     }
 
     &.sidenote-left {
-        left: 0;
-        margin-left: -($sidenote-width + $sidenote-offset);
+        @include margin-content-left;
     }
-
-    @include bordered-block;
-    padding: $sidenote-padding;
-    box-sizing: border-box;
-    text-align: left;
 }
 
 .sidenote-delimiter {
@@ -85,18 +63,14 @@ $sidenote-highlight-border-width: .2rem;
     }
 }
 
-@include below-two-sidenotes {
+@include below-two-margins {
     .sidenote-content.sidenote-left {
         @include hidden-sidenote;
         margin-left: 0rem;
     }
-
-    .container {
-        left: -$sidenote-width/2
-    }
 }
 
-@include below-one-sidenote {
+@include below-one-margin {
     .post-content {
         max-width: 100%;
     }
@@ -105,9 +79,4 @@ $sidenote-highlight-border-width: .2rem;
         @include hidden-sidenote;
         margin-right: 0rem;
     }
-
-    .container {
-        position: initial;
 }
-}
-

themes/vanilla/assets/scss/style.scss

@@ -1,5 +1,6 @@
 @import "variables.scss";
 @import "mixins.scss";
+@import "margin.scss";
 
 body {
   font-family: $font-body;
@@ -55,6 +56,14 @@ div.highlight table pre {
   @include below-container-width {
       padding: 0rem 1rem 0rem 1rem;
   }
+
+  @include below-two-margins {
+      left: -$margin-width/2;
+  }
+
+  @include below-one-margin {
+      position: initial;
+  }
 }
 
 .button, input[type="submit"] {