时间戳

首页 > 解决方案 > 是否有可能让这个 SCSS 在 CSS 中工作？

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

问题描述

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

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

我正在编码的网站是 CSS 格式的，当我在我的 VS Code 编辑器中粘贴该 codepen 中的 CSS 时，会出现错误。我有什么办法可以将它与我的普通 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;
}

谢谢！

标签： csssass

解决方案

您可以手动将 sass 转换为 css，或者像我一样使用在线编译器

结果

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

您还可以设置一个预处理器，编译scss为css使用捆绑器，但这只有在您的网站变得更大并且您觉得需要组织您的样式时才这样做。

推荐阅读