Is it possible to get this SCSS to work in CSS? - css

Question

I really want to use this +/- toggle button I found on a codepen https://codepen.io/Inlesco/pen/XXRRmY/
Only issue is that the CSS processor it uses is SCSS, and when I change it there to CSS it stops working
The website I'm coding is in CSS and when I paste the CSS from that codepen in my VS Code editor lights up with errors. Is there any way for me to use this with my normal 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;
}
Thanks!

Answer 1

You can manually convert sass into css, or use an online compiler like I did
Result
.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;
}
You can also setup a preprocessor that compiles scss to css using bundlers, but that's only if your website gets bigger and you feel the need to organize your styles.

Answer 2

Like in the answer from Min Lee, you can simply convert SCSS to CSS. However, it's worth understanding the difference because it's not very significant and simple to do yourself.
All you need to do is remove the nested rules that aren't supported by CSS.
Change this SCSS:
.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;
}
}
To this 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;
}