Hover in SCSS is not reflecting after changes-CodePudding

I got three file app.css , app.scss and app.css.map . I am trying to change some colour but it not reflecting even i tried opening in private window. I am trying to make this changes over 2 hours :(

SCSS Code :

.card {
    background-color: #fff;
&__btn {
        position: relative;
        a {
            background-color: #9933ff;
            font-size: 20px;
            color: #fff;

            &:hover {
                background-color: #FF7700;
            }
        }

    }

    &:hover {
        background-color: #FFFFCC;
        & .card__btn {
            a {
                background-color: #FF7700 !important;
            }
        }

    }
}

I am just trying to change color code but it not reflecting in live website. So, i created a style.css custom file and added these code to override existing style-sheet from SCSS file

Override CSS Code :

.card:hover {
    background-color: #b3f1f7 !important;
}
.card__btn a {
    background-color: #0088e8 !important;
}
.card__btn a:hover {
    background-color: #00b4c6;
}

HTML Code :

<div  id="openWebsite" data-site="https://bktrack.topcreditsrating.com/click/1?ns=c=f8472a7e-bead-431c-89fc-54e10034575e..l=d4f59af0-634b-4b20-b73b-2b4468fe9971..a=0..b=0">
                  <div >
                     <div >
                        <img src="//www.example.com/compare/assets/img/mycredit.png">
                        <div >
                           <div>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                              </svg>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                              </svg>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                              </svg>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                              </svg>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                              </svg>
                           </div>
                        </div>
                        <p>User Rating</p>
                     </div>
                     <div >
                        <h2>1</h2>
                     </div>
                  </div>
                  <div >
                     <p>You are more than just 1 credit score. So, we give you all 3. Get My Scores Get Your Credit Scores & Credit Reports from All 3 Bureaus, Instantly!</p>
                     <ul>
                        <li>
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                              <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z" />
                              <path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z" />
                           </svg>
                           Our Top Choice 2022
                        </li>
                        <li>
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                              <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z" />
                              <path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z" />
                           </svg>
                           $1 Million Identity Theft Insurance
                        </li>
                        <li>
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                              <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z" />
                              <path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z" />
                           </svg>
                           100% Free Trial Credit Score
                        </li>
                        <li>
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                              <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z" />
                              <path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z" />
                           </svg>
                           3 Credit Scores & Reports
                        </li>
                        <li>
                           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
                              <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z" />
                              <path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708z" />
                           </svg>
                           Daily Credit Monitoring & Alerts 
                        </li>
                     </ul>
                  </div>
                  <div >
                     <a href="https://bktrack.topcreditsrating.com/click/1?ns=c=f8472a7e-bead-431c-89fc-54e10034575e..l=d4f59af0-634b-4b20-b73b-2b4468fe9971..a=0..b=0">
                        Visit Site
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"  viewBox="0 0 16 16">
                           <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
                        </svg>
                     </a>
                  </div>
                  <div >
                     <img src="//www.example.com/compare/assets/img/discount.png">
                     <h2>FREE <br>TRIAL</h2>
                  </div>
                  <div >
                     <span>TOP CHOICE 2022</span>
                  </div>
               </div>

but still the changes is not reflecting. How can i edit SCSS file or how to convert my current SCSS to CSS file. i know CSS but this SCSS something new to me.

CodePudding user response：

So let's take it easy, you are doing all those things above right.. it's just missed close "}" in your SCSS:

.card {
  background-color: red;
  &__btn {
    position: relative;
    a {
      background-color: #9933ff;
      font-size: 20px;
      color: #fff;

      &:hover {
        background-color: #ff7700;
      }
    }
  }

  &:hover {
    background-color: #ffffcc;
    & .card__btn {
      a {
        background-color: #ff7700 !important;
      }
    }
  }
}

And sometimes you should test out your page in your private browser so the cache is cleared automatically

And this is a live preview

CodePudding user response：

How did you add the override CSS code? Inline or with a new file?

Did you check if it is included?

Did you check if something isn't just overwriting it?

Are you sure you don't need to compile the code?

Did you clear your cache (browser cache, inspector -> network -> disable cache)?

To convert an scss file you need a compiler, but given you don't know what you're doing, it might be better to go with a css file included below, or just in a tag in the page. Not very professional, but might be what you need right now, if you're in a hurry.