Skip to content

Ampersand with no parents #2482

@dkrutsko

Description

@dkrutsko

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; }
}

Live example of above

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions