Question

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

我试着写得更好

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

和

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

有什么建议吗？我想要这样的东西

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

    }

Answer 1

见Changing Selector Order，例如：

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

Answer 2

第二个更好。在less中，&运算符用于表示父选择器。因此，在您的情况下，您不会重新定义body。相反，您正在使用现有的选择器，这使您的CSS更具可读性。

lesscss - 这是最好的方式

2 个答案: