-
Notifications
You must be signed in to change notification settings - Fork 468
Closed
Description
Normally, you get an error when you use an ampersand with no parents:
& .class
{
color: black;
}
However, you don't get an error if you do the same thing within a mixin:
@mixin mixin()
{
& .class
{
color: black;
}
}
@include mixin();
If this isn't a bug, I'd like to see the ampersand be a bit more useful:
@mixin mixin()
{
&, .prefix
{
.black { color: black; }
.white { color: white; }
}
}
@include mixin();
should generate:
.black, .prefix .black { color: black; }
.white, .prefix .white { color: white; }
Or perhaps there's already a way to achieve the above result?
This would be useful in the following scenario:
@mixin mixin($min)
{
@media (min-width: $min)
{
&, .bp-#{$min}
{
@content;
}
}
}
@include mixin(200px)
{
.m-200 { margin: 1rem; }
.p-200 { padding: 1rem; }
}
@include mixin(400px)
{
.m-400 { margin: 2rem; }
.p-400 { padding: 2rem; }
}
<div class="m-200 m-400"> <!-- Uses media min-width -->
<div class="bp-200px"> <!-- Controlled through JS -->
<div class="m-200 m-400"> <!-- Uses parent class -->
</div>
</div>
</div>
This saves you from having to duplicate the content within the mixin.
The above scss would generate:
@media (min-width: 200px)
{
.m-200, .bp-200px .m-200 { margin: 1rem; }
.p-200, .bp-200px .p-200 { padding: 1rem; }
}
@media (min-width: 400px)
{
.m-400, .bp-400px .m-400 { margin: 2rem; }
.p-400, .bp-400px .p-400 { padding: 2rem; }
}