How would I write the following css into valid sass, scss?

Question

I have the following css which I want to convert into valid scss sass:

        .my-class>li.active>a,
        .my-class>li.active>a:hover,
        .my-class>li.active>a:focus {
           color: #555;
           background-color: #fff;
        }

I tried as per below, but it did not give me the exact results:

  .myclass {
     .li {
        &.active {
           color: #555;
           background-color: #fff;
           &:hover, &:focus {
              color: #555;
              background-color: #fff;
           }
        }
     }
  }

Answer 1

try in this way:

 .myclass {
     > li.active {
        > a, > a:hover, > a:focus {
            color: #555;
            background-color: #fff;              
        }
     }
  }

The resulting output (tested on sassmeister ) is

.myclass > li.active > a,
.myclass > li.active > a:hover, 
.myclass > li.active > a:focus {
  color: #555;
  background-color: #fff;
}