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

Question

我是一个使用 SCSS 的初学者，我不知道如何将我的旧 CSS 重写为使用 SCSS 用于 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

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

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

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