Question

我有这段代码，在悬停时淡出列表中除了焦点之外的其他li。我能够将CSS转换为LESS ..但我觉得最后一部分需要优化。我最近开始采用LESS，所以任何帮助都会非常感激。

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

在尝试转换为LESS时，我不确定如何以更优化的方式进行此操作..

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

如果你想要一个STRICT等价物，那么你可以尝试：

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

更好的方式来写这个在LESS

1 个答案: