Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ampersand with no parents #2482

Closed
dkrutsko opened this issue Oct 5, 2017 · 1 comment
Closed

Ampersand with no parents #2482

dkrutsko opened this issue Oct 5, 2017 · 1 comment

Comments

@dkrutsko
Copy link

dkrutsko commented Oct 5, 2017

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

@chriseppstein
Copy link
Contributor

This should be an error, per the reference implementation:

Error: Base-level rules cannot contain the parent-selector-referencing character '&'.
        on line 3 of standard input, in `mixin'
        from line 10 of standard input

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants