Forums

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
    Posts
  • #250813
    Kushal Jayswal
    Participant

    LESS (CSS)

    .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.

    #250818
    Paulie_D
    Member

    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.

    #250862
    Kushal Jayswal
    Participant

    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.