css scss sass_网页设计：如何将CSS转换为Sass和SCSS

CSS是一种非常简单明了的语言，但是当它变得太长时-假设成千上万行，它将变成维护的“噩梦”。 一切都太复杂了，难以维护，我们将迷失要跟上或覆盖哪些样式规则。 因此，创建了CSS预处理程序以使编写CSS可编程且更易于维护。

在开发人员和设计师中最受欢迎的一种是Sass ，我们之前在以下文章中已经介绍过：

• Sass入门：安装和基础
• 语法很棒的样式表：在Sass中使用Compass
• 比较CSS预处理器：Sass与。 减

如果您刚刚从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-face mixin，如下

@include font-face("DroidSansRegular", font-files("DroidSansRegular-webfont.ttf", "DroidSansRegular-webfont.otf", "DroidSansRegular-webfont.woff"), "DroidSansRegular-webfont.eot", normal);

但是，总的来说，对于刚开始使用Sass的人来说，此工具是许多不错的地方之一。 转换旧CSS，您将看到它是如何用Sass或SCSS语法构造的。

翻译自: https://www.hongkiat.com/blog/convert-css-to-sass/