我真的很想使用我在 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;
}
谢谢!
最佳答案
您可以手动将 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
,但这仅适用于您的网站变得更大并且您觉得需要组织样式的情况。
关于css - 是否有可能让这个 SCSS 在 CSS 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58985849/