The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sass Ampersand – Chaining CSS Class as Parent

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #250813
    Kushal Jayswal

    LESS (CSS)

              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: #page .inner .left.padding-left-10px {}

    and not

    .rtl .app #page .inner .left.padding-left-10px {}



    I think you need something like @root but you’re nesting too deep as it is.

    No more than 3 levels is recommended.

    Kushal Jayswal

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.