CSS是一种非常简单明了的语言，但是当它变得太长时–假设成千上万行，它将变成维护的“噩梦”。一切都太复杂了，难以维护，我们会迷失要跟上或覆盖哪些样式规则。因此，创建了CSS预处理程序以使编写CSS可编程且更易于维护。
如果您刚刚从CSS转换为Sass，则可能正在考虑将您的旧CSS转换为Sass或SCSS。好吧，如果是这样，您可以使用名为css2sass的第三方工具。
使用CSS2SASS
该工具非常简单直观-我什至不必告诉您如何使用它，但出于演示目的，我们将对该工具进行一些测试。首先，给出以下CSS代码：
header .nav {
margin-top: 100px;
}
header .nav li {
margin-left: 10px;
}
header .nav li a {
height: 30px;
line-height: 10px;
}
我们想将其转换为Sass语法，将其转换为：
header .nav
margin-top: 100px
li
margin-left: 10px
a
height: 30px
line-height: 10px
现在，使用缩进将样式规则嵌套在前面的选择器下，以区分级联级别。如果将其转换为SCSS语法，则级联将使用大括号来区分，就像CSS中一样。
相同的样式规则
让我们再试一次。这次，我们有以下两个具有完全相同的样式规则的选择器，我们将把它隐藏为Sass语法。
.footer {
color: #b3b3b3;
background-color: #fafafa;
}
.copy {
color: #b3b3b3;
background-color: #fafafa;
}
生成的输出非常聪明，此工具将选择器连接在一行中，并使用逗号分隔它们，如下所示。
.footer, .copy
color: #b3b3b3
background-color: #fafafa
虽然，这并不是我真正期望的。如果输出是在Selector Inheritance中，可能会更好，可能类似于下面的代码。
.inherit1
color: #b3b3b3
background-color: #fafafa
.footer
@extend .inherit1
.copy
@extend .inherit1
伪类和选择器组合
最后，我们想尝试使用:hover 伪类和选择器组合转换一些样式规则，如下所示。
.button:hover {
color: #ffffff;
background-color: #bf813d;
}
.button.active {
background-color: #986731;
}
输出是预期的。像这样，该工具将伪类和选择器组合与&符号嵌套在一起。
.button
&:hover
color: #ffffff
background-color: #bf813d
&.active
background-color: #986731
改进空间
该工具在识别我们的CSS级联结构以将其适当地转换为Sass或SCSS语法方面有一些限制。但是，肯定还有改进的空间。
我不太确定是否可以将Compass集成到此转换工具中。如果我们能够转换以下CSS3@font-face规则，那就太好了：
@font-face {
font-family: "DroidSansRegular";
src: url("fonts/DroidSans-webfont.eot");
src: url("fonts/DroidSans-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/DroidSans-webfont.woff") format("woff"), url("fonts/DroidSans-webfont.ttf") format("truetype"), url("fonts/DroidSans-webfont.svg#DroidSansRegular") format("svg");
font-weight: normal;
font-style: normal;
}
…进入Compass @font-facemixin，如下
@include font-face("DroidSansRegular", font-files("DroidSansRegular-webfont.ttf", "DroidSansRegular-webfont.otf", "DroidSansRegular-webfont.woff"), "DroidSansRegular-webfont.eot", normal);
但是，总的来说，对于刚开始使用Sass的人来说，此工具是许多不错的地方之一。转换旧的CSS，您将看到它是如何用Sass或SCSS语法构造的。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/262052.html