How to convert the following CSS into SCSS format?

Question

I'm working on a WordPress page with a new layout I added to Flexible Content Template customer field. I found the .scss file where the styles should be placed in, but not sure how to convert my CSS into .scss format. Below is the CSS I want to change to SCSS.

.hero-with-text-cta-hero {
  background-color: #ececec;
}

.texts-and-cta {
  position: absolute;
  top: 2rem;
  right: 4rem;
  width: 40%;
  text-align: right;
}

.texts-and-cta-col {
  position:static !important;
}

.texts-and-cta h2 {
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 1.8rem !important;
  font-family: Roboto, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
  color: #a6a2a3 !important;
}

@media (max-width: 959px) {
  .texts-and-cta {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    text-align: center;
    padding-top:1rem;
  }
}

.hero-with-text-cta-hero h1 {
  color: #666766 !important;
}

@media (min-width: 1280px) {
.hero-with-text-cta-hero  h1 {
      font-size: 4rem !important;
  }
}

Damian Chudobiński · Accepted Answer · 2021-12-25 10:40:17Z

1

Just copy it into .scss file, sass can handle normal css

answered Dec 25, 2021 at 10:40

Damian Chudobiński

6108 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CodeForGood Over a year ago

Damian, I tried but it doesn't appear to work.

CodeForGood Over a year ago

Apologies, it is working. Clearing cache helped.

CodeForGood Over a year ago

Damian, could you please have a look at the post on trouble reading active element? Link to it is here. stackoverflow.com/questions/73364211/…

Collectives™ on Stack Overflow

How to convert the following CSS into SCSS format?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related