fix(layout-grid): Import the variables in the mixin (#1232)

packages/mdc-layout-grid/README.md

@@ -56,7 +56,7 @@ When your contents need extra structure that cannot be supported by single layou
 
 The nested layout grid behaves exactly like when they are not nested, e.g, they have 12 columns on desktop, 8 columns on tablet and 4 columns on phone. They also use the **same gutter size** as their parents, but margins are not re-introduced since they are living within another cell.
 
-However, Material guideline do not recommend have a deeply nested grid since it might means a over complicated UX.
+However, the Material Design guidelines do not recommend having a deeply nested grid as it might mean an over complicated UX.
 
 ```html
 <div class="mdc-layout-grid">

packages/mdc-layout-grid/_mixins.scss

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "./variables";
+
 // returns the lower grid boundary or null if the smallest grid is selected
 @function mdc-layout-grid-breakpoint-min($size) {
   @if not map-has-key($mdc-layout-grid-columns, $size) {