从旧的 CSS 代码中学习 SCSS - 如何重写这个？

Question

我是使用 SCSS 的初学者，现在我不确定如何使用 SCSS 将我的旧 CSS 重写为新的 TypeScript 项目我在下面选了几个例子来问这个问题，如果有人能指出正确的方法，我想我可以想出我必须重写的其余代码。

下面的示例总结了我需要学习的所有内容：

.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

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

SCSS 是 CSS 的超集。因此，您只需将其复制粘贴到 SCSS 文件中即可正常工作

Answer 2

有一些有效的在线转换工具，但要手动学习，请记住一个简单的规则 - 每当您看到重复时，您就知道可以从中创建一个嵌套块。否则，您应该只写常规 CSS.

例如，您有 3 个以 .sb-slider 开头的声明，因此可以成为一个块。从那里，您将两次定位 .sb-slider 下面的 li > a，以及它下面的东西。这有助于 SCSS 的自然嵌套结构，它的工作方式与您想象的完全一样。

对于 .sb-perspective > div 声明，您只使用了一次并且没有重复使用它，因此没有理由将其作为一个块。把所有这些放在一起，你会得到这个：

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

Answer 3

我已将您提到的 CSS 代码转换为 SCSS 代码，以便更好地了解转换代码的难易程度：

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

如果您注意到，它遵循您必须在您使用的标签或类中创建父子关系的模式。关键字“&”表示您使用的是父命名。

从旧的 CSS 代码中学习 SCSS - 如何重写这个？

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

css

typescript

sass

spfx

scss-lint