CODEWITHSUNDEEP
csssass
Ryan Soderberg
Ryan Soderberg

Reputation: 772

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

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!

Upvotes: 0

Views: 64

Answers (2)

jono
jono

Reputation: 1842

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

Upvotes: 1

Min Lee
Min Lee

Reputation: 161

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.

Upvotes: 2

Related Questions