resurrectorx resurrectorx - 6 months ago 32
Less Question

Better way to write this in LESS

I have this piece of code which, on hover fades out the other li in a list apart from the one in focus. I was able to convert the CSS into LESS.. but I feel the last part needs to be optimised. I've recently started adopting LESS, so any help would be greatly appreciated.

.folder-child li {
/*some code*/
opacity: 1;
}

.folder-child:hover li {
opacity: .33;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}

.folder-child li:hover {
opacity: 1;
}


While trying to convert to LESS i'm not sure how to do it in a more optimized way..

.navigation {
ul {
.folder-collection.folder {
.folder-child {

li {
/*some code*/
opacity: 1;

a {
/*some code*/
}
}

&:hover,
&:focus {
li {
opacity: .33;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
}
}
}
}
}

.navigation {
ul {
.folder-collection.folder {
.folder-child {
li:hover,
li:focus {
opacity: 1;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
}
}
}
}

Answer Source

If you want a STRICT equivalent, then you can try :

.folder-child{
  li{
    /*some code*/
    opacity:1;
    &:hover{
      opacity: 1;
    }
  }
  &:hover{
    li{
      opacity: .33;
      -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
      transition: opacity 0.5s, transform 0.5s;
    }
  }
}