-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
Reference to nth-parent with ampersand(int|selector) #2264
Comments
In SassScript, |
We provide a number of functions for operating on selectors that you may find useful: http://sass-lang.com/documentation/Sass/Script/Functions.html#selector_functions |
@charlesroper Great to know about this functions. Is not possible then think about implements a function that works like I specified? Something like |
Lets use the below code as reference:
Lets supposes that the
.Header
could be a.Header.red
that turns the insider.text
to red color, respecting the middle selectors (in case, the> .title > .text
).Currently, we should do that:
Then I suggests create a nth-parent selector (based on depth that you have declared). Then I thought about two options:
Select by distance:
&(0)
mean the own selector (same that&
). Then,&(1)
will mean the parent selector (> .title
) and, finally,&(2)
will be the parent-parent selector (.Header
).Select by query:
It's more clear, because you can find selector by the query. In this case,
&(.title)
will returns the> .title
selector, but&(> .title)
is an error. It is similar to the.closest()
from jQuery.It will always will select the more closest selector from current depth level. If you wants to select a less depth selector that have the same name, then you should defines a placeholder-selector by using
%placeholder
.Complex example
In this case, if on cursor I set:
It will be replaced by:
The text was updated successfully, but these errors were encountered: