css - 是否有可能让这个 SCSS 在 CSS 中工作？

Question

我真的很想使用我在 codepen 上找到的这个 +/- 切换按钮 https://codepen.io/Inlesco/pen/XXRRmY/

唯一的问题是它使用的 CSS 处理器是 SCSS，当我将它更改为 CSS 时它停止工作

我正在编写的网站是使用 CSS 编写的，当我将 Codepen 中的 CSS 粘贴到我的 VS Code 编辑器中时，出现错误。有什么方法可以让我在我的普通 CSS 中使用它吗？

.closed {
  .vertical {
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
  }
  .horizontal {
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
    opacity: 1;
  }
}

.opened {
  opacity: 1;
  .vertical {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
  }
  .horizontal {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
    opacity: 0;
  }
}

.circle-plus {
    height: 4em;
    width: 4em;
    font-size: 1em;
    opacity: .7;
}

.circle-plus .circle {
    position: relative;
    width: 2.55em;
    height: 2.5em;
    border-radius: 100%;
    border: solid .5em #DFDAD7;
}
.circle-plus .circle .horizontal {
    position: absolute;
    background-color: red;
    width: 30px;
    height: 5px;
    left: 50%;
    margin-left: -15px;
    top: 50%;
    margin-top: -2.5px;
}
.circle-plus .circle .vertical {
    position: absolute;
    background-color: red;
    width: 5px;
    height: 30px;
    left: 50%;
    margin-left: -2.5px;
    top: 50%;
    margin-top: -15px;
}

谢谢!

Answer 1

您可以手动将 sass 转换为 css，或使用 online compiler像我一样

结果

.closed .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}
.closed .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
  opacity: 1;
}
.opened {
  opacity: 1;
}
.opened .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}
.opened .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
  opacity: 0;
}
.circle-plus {
  height: 4em;
  width: 4em;
  font-size: 1em;
  opacity: 0.7;
}
.circle-plus .circle {
  position: relative;
  width: 2.55em;
  height: 2.5em;
  border-radius: 100%;
  border: solid 0.5em #DFDAD7;
}
.circle-plus .circle .horizontal {
  position: absolute;
  background-color: red;
  width: 30px;
  height: 5px;
  left: 50%;
  margin-left: -15px;
  top: 50%;
  margin-top: -2.5px;
}
.circle-plus .circle .vertical {
  position: absolute;
  background-color: red;
  width: 5px;
  height: 30px;
  left: 50%;
  margin-left: -2.5px;
  top: 50%;
  margin-top: -15px;
}

您还可以设置一个预处理器，使用 bundler 将 scss 编译为 css，但这仅适用于您的网站变得更大并且您觉得需要组织样式的情况。