From d360b10dffcda162e8b4ac7cc50588a90dca1d33 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 1 Dec 2017 09:24:15 -0500
Subject: [PATCH] Add basic @variants docs

---
 .../docs/functions-and-directives.blade.md    | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md
index c8c619d9d..461331350 100644
--- a/docs/source/docs/functions-and-directives.blade.md
+++ b/docs/source/docs/functions-and-directives.blade.md
@@ -78,6 +78,51 @@ Note that `@@apply` **will not work** for mixing in hover or responsive variants
 }
 ```
 
+### `@variants`
+
+You can generate `responsive`, `hover`, `focus`, and `group-hover` versions of your own utilities by wrapping their definitions in the `@variants` directive
+
+```less
+@@variants hover, focus {
+  .banana {
+    color: yellow;
+  }
+  .chocolate {
+    color: brown;
+  }
+}
+```
+
+This will generate the following CSS:
+
+```less
+.banana {
+  color: yellow;
+}
+.chocolate {
+  color: brown;
+}
+.focus\:banana:focus {
+  color: yellow;
+}
+.focus\:chocolate:focus {
+  color: brown;
+}
+.hover\:banana:hover {
+  color: yellow;
+}
+.hover\:chocolate:hover {
+  color: brown;
+}
+```
+
+The `@variants` at-rule supports all of the values that are supported in the `modules` section of your config file:
+
+- `responsive`
+- `hover`
+- `focus`
+- `group-hover`
+
 ### `@@responsive`
 
 You can generate responsive versions of your own classes by wrapping their definitions in the `@responsive` directive: