Learning SCSS from old CSS code - how to rewrite this?

Question

I'm a beginner using SCSS and I'm not sure how to rewrite my old CSS into something new using SCSS for a TypeScript project, right now I picked a few examples below to ask this question, if somebody could show the right way, I guess I can figure the rest of the code I have to rewrite.

The samples below summarize everything that I need to learn:

.sb-slider li > a {
    outline: none;
}

.sb-slider li > a img {
    border: none;
}

.sb-perspective > div {
    position: absolute;
}

.sb-slider li.sb-current .sb-description {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: 1;
}

Answer 1

There are online conversion tools that are effective, but to learn it by hand, there's one simple rule to keep in mind - any time you see repetition, you know that you can create a nested block out of it. Otherwise, you should just write regular CSS.

For instance, you have 3 declarations in there that start with .sb-slider, so that can become a block. From there you're targeting li > a underneath .sb-slider twice, as well as something underneath that. This lends to SCSS's natural nesting structure, which works exactly how you think it would.

For the .sb-perspective > div declaration, you are only using that once and not repeating it, so there is no reason to make a block out of it. Putting all of that together, you get this:

.sb-slider {
     li > a {
          outline: none;

          img {
                border: none;
          }
     }

     li.sb-current .sb-description {
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
          opacity: 1;
     }
}

.sb-perspective > div {
     position: absolute;
}