Add dollar-variables to order/order Stylelint rule

This way we've been able to detect a bug where we were assigning a value
to the `$global-left` variable instead of assigning it to either the
`left` or `right` properties. This, however, was the right behavior,
since adding a `left` indentation to the link wasn't correct because its
parent element already had padding on the sides.

.stylelintrc.yml

@@ -40,6 +40,7 @@ rules:
   shorthand-property-no-redundant-values: true
   value-no-vendor-prefix: true
   order/order:
+    - dollar-variables
     - type: at-rule
       name: extend
     - type: at-rule

app/assets/stylesheets/layout/skip_to_main_content.scss

@@ -8,13 +8,11 @@
     }
 
     &:focus {
-      @include body-colors;
-
       $outline-size: $focus-inner-width + $focus-middle-width + $focus-outer-width;
+      @include body-colors;
 
       padding: 0.4rem;
       position: absolute;
-      $global-left: $outline-size;
       top: $outline-size;
       z-index: 1000;
     }