Skip to content

Commit d1764b3

Browse files
committed
Update @apply docs to be explicit about preprocessor features
1 parent 4b345d6 commit d1764b3

File tree

1 file changed

+16
-1
lines changed

1 file changed

+16
-1
lines changed

docs/source/docs/functions-and-directives.blade.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,32 @@ This is extremely useful when you find a common utility pattern in your HTML tha
4646
}
4747
```
4848

49-
Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mixin the plain version of that utility into the `:hover` pseudo-selector or a new media query:
49+
Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mix in the plain version of that utility into the `:hover` pseudo-selector or a new media query:
5050

5151
```less
5252
// Won't work:
5353
.btn {
54+
@@apply .block .bg-red;
5455
@@apply .md:inline-block;
5556
@@apply .hover:bg-blue;
5657
}
5758

5859
// Do this instead:
5960
.btn {
61+
@@apply .block .bg-red;
62+
}
63+
.btn:hover {
64+
@@apply .bg-blue;
65+
}
66+
@@screen md {
67+
.btn {
68+
@@apply .inline-block;
69+
}
70+
}
71+
72+
// Or if you're using Less or Sass:
73+
.btn {
74+
@@apply .block .bg-red;
6075
&:hover {
6176
@@apply .bg-blue;
6277
}

0 commit comments

Comments
 (0)