- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
.app{
#page{
.inner{
.left{
&.padding-left-10px{
padding-left: 10px;
// rtl direction
.rtl&{ //////////////////////////////////
padding-left: 0;
padding-right: 10px;
}
}
}
}
}
}
Consider the line I have highlighted with ///...
.
I want the same result in Sass (.scss). Is it possible?
Expected result should be:
.rtl.app #page .inner .left.padding-left-10px {}
and not
.rtl .app #page .inner .left.padding-left-10px {}
Thanks.
I think you need something like @root but you’re nesting too deep as it is.
http://sassbreak.com/getting-back-to-our-roots/
No more than 3 levels is recommended.
Thanks @Paulie_D. I appreciate your advice.
But this can be the case where CMS (i.e.: Drupal, Liferay, etc.) comes in a picture for theme integration and you infect realize no control over the HTML structure :).
For such scenario, there is no other option than following deeper hierarchical structure (to get CSS specificity) for overriding purpose and to avoid !important
as well.