Custom SCSS Linting with style lint

Question

I have a straightforward question. How do you create a custom lint rule with scss which can move media queries outside of classes?

For example, the following is a VALID:

.class-name {
    background-color: green;
}

@media only screen and (max-width: 600px) {
  .class-name {
    background-color: lightblue;
  }
}

while following should throw an error

.class-name {
    background-color: green;

    @media only screen and (max-width: 600px) {  
        background-color: light-blue;
    }
}