Add section about using dash-cased for variable names

We want people to use a consistent style for variable names. We believe
that simple rules are most likely to be followed, and that consistency
is good, so we are settling on dash-cased, which is what we use for
everything else, such as classes, mixins, functions, and properties.

Along with this change, I am explicitly enabling the NameFormat
SCSS-Lint rule which enforces this style. Note that this is enabled in
SCSS-Lint by default, so this is functionally no different, but it is
good to be explicit about things.

Author: lencioni

.scss-lint.yml

@@ -18,6 +18,9 @@ linters:
   LeadingZero:
     enabled: false
 
+  NameFormat:
+    enabled: true
+
   PropertySortOrder:
     enabled: false
 

README.md

@@ -18,6 +18,7 @@
   1. [Sass](#sass)
     - [Syntax](#syntax)
     - [Ordering](#ordering-of-property-declarations)
+    - [Variables](#variables)
     - [Mixins](#mixins)
     - [Extend directive](#extend-directive)
     - [Nested selectors](#nested-selectors)
@@ -240,6 +241,10 @@ Use `0` instead of `none` to specify that a style has no border.
     }
     ```
 
+### Variables
+
+Prefer dash-cased variable names (e.g. `$my-variable`) over camelCased or snake_cased variable names. It is acceptable to prefix variable names that are intended to be used only within the same file with an underscore (e.g. `$_my-variable`).
+
 ### Mixins
 
 Mixins should be used to DRY up your code, add clarity, or abstract complexity--in much the same way as well-named functions. Mixins that accept no arguments can be useful for this, but note that if you are not compressing your payload (e.g. gzip), this may contribute to unnecessary code duplication in the resulting styles.