0

I'm working on making a webdesign responsive and therefor now trying to implement media-queryies with skeleton brakepoints. But when compiling the scss file to css with the vs code extension, the query doesn't show up in the css file and as a result of that not working on my website.

The .scss does look like this currently

.navbar {
  height: 90px;
  background-color: #24252a;
  
  .maLogo {
    height: 80px;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 5px;
    float: left;
  }
  
  .maName {
    color: white;
    font-family: "Tilt Warp", cursive;
    padding-top: 20px;
    font-size: 40px;
    margin-left: 80px;
    display: block;
    float: left;
    text-decoration: underline;
  }
  
  li {
    display: none;
    list-style-type: none;
    float: right;
    padding: 15px;
    margin-top: 8px;
  }
  
  a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    background-color: #0088a9;
    font-size: 22px;
    text-align: center;
    padding: 5px;
    width: 125px;
    display: inline-block;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    
    &:hover {
      background-color: #25e6c6;
    }
    
    &:hover {
      border-radius: 20%;
      -webkit-border-radius: 20%;
      -moz-border-radius: 20%;
      -ms-border-radius: 20%;
      -o-border-radius: 20%;
      transition: 0.5s;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -ms-transition: 0.5s;
      -o-transition: 0.5s;
    }
  }
}

@media (min-width: $bp-larger-than-desktophd) {
  .navbar li {
    display: block;
  }
}

If I implement the query directly into my .css file, everything works. So why does the query not being compiled from scss to css?

Amaury Hanser
  • 3,191
  • 12
  • 30
Nyghtqore
  • 1
  • 5
  • Are you sure the SCSS compiler is running? If you make other changes to the SCSS file, do they appear in the browser? – Brandon Gano Mar 28 '23 at 06:07
  • Are there any errors output by the extension itself? And, if this is your full SCSS file, where is the declaration for `$bp-larger-than-desktophd`? – InSync Mar 28 '23 at 06:14
  • @InSync I guess you're right! Forgot to import the file that contains the variables. Beginners mistake D: compiler output said "Error: Undefined variable" <- pretty obvious that – Nyghtqore Mar 28 '23 at 06:24

0 Answers0