CODEWITHSUNDEEP
less
Chameron
Chameron

Reputation: 2984

lesscss - which is the best way

article {
   // some css code
   //...
   // end css code
   h1 {
      transition: all 0.3s;
   }
} 
body.active {
    article {
        h1 {
           transform: translate(0, 10px); 
        }
    } 
}

I try to write better

body {
    article {
       // some css code
       //...
       // end css code
       h1 {
          transition: all 0.3s;
       }
    } 
    &.active article {
       h1 {
          transform: translate(0, 10px); 
       }
    } 
}

and 

body {
    article {
       // some css code
       //...
       // end css code
       h1 {
          transition: all 0.3s;
       }
    } 
    &.active article h1 {
       transform: translate(0, 10px); 
    }
}

Any suggestion ? I want some thing like this

body {
        article {
           // some css code
           //...
           // end css code
           h1 {
              transition: all 0.3s;

              // here, i want to write code for h1 tag when body has active class in this block
           }
        } 

    }

Upvotes: 2

Views: 40

Answers (2)

seven-phases-max
seven-phases-max

Reputation: 11820

See Changing Selector Order, e.g.:

h1 {
    transition: all 0.3s;
    body.active & {
        transform: translate(0, 10px);
    }
}

Upvotes: 1

Mert Metin
Mert Metin

Reputation: 411

The second one is better. In less, & operator is used to represent parent selector. So in your case you don't redefine body. Instead, you are using existing selector which makes your css more readable.

Upvotes: 0

Related Questions