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

I think stack exchange's Code Review is a better place to ask that https://codereview.stackexchange.com/ — arieljuod, Mar 21 '19 at 03:35

score 1 · Accepted Answer · answered Mar 21 '19 at 03:39

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

thanks, so this is my first option on the table, and somebody left another answer below, so two ways there? very interesting! — Mr. Dr. Sushi, Mar 21 '19 at 22:49
This is closer to semantically correct SCSS (you don't need to use the & operator if you're not explicitly targeting the parent element like you would for &:hover or &::after), but both are valid code. — Mark, Mar 22 '19 at 00:07

score 0 · Answer 2 · answered Mar 21 '19 at 03:31

0

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

SCSS is a superset of CSS. So you can just copy paste that into a SCSS file and it will just work

answered Mar 21 '19 at 03:31

basarat

261,912
58
460
511

Not for a SharePoint Framework solution, I did try that and it failed – Mr. Dr. Sushi Mar 21 '19 at 22:46

score 0 · Answer 3 · answered Mar 21 '19 at 05:11

0

I have converted the CSS code you mentioned to SCSS code for better understanding on how easily you can convert your code:

.sb-slider {
li {
    & > a {
        outline: none;
        img {
            border: none;
        }
    }
    &.sb-current {
        .sb-description {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            opacity: 1;
        }
    }
}
}
.sb-perspective {
    & > div {
        position: absolute;
    }
}

If you notice, it follows the pattern that you have to create parent child relationship in the tags or classes which you are using. Keyword "&" represents that you are using the parent naming.

answered Mar 21 '19 at 05:11

AKNair

1,369
1
12
24

so I have two ways of re-writing my code into SCSS - this is the second option then? – Mr. Dr. Sushi Mar 21 '19 at 22:48
This is one of the ways to do it. The easiest way is to use the converters available online, but using that you will not be able to learn effectively. What I can suggest is, use converters and check how the code has been modified by them. You can easily understand the syntax/rules to be used for conversion. – AKNair Mar 23 '19 at 10:12

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

3 Answers3