CODEWITHSUNDEEP
csssass
Joe
Joe

Reputation: 948

SASS code problems

I've been trying to learn flexbox and I messed around with my codepen on mobile and something happened, I can't pin-point the problem but it keeps giving me an error and I can not for the life of me spot it! Everything seems fine.

The code isn't amazing, I'm not great at coding yet, it's not DRY, it's messy, not very readable and whatever else but it was working. The page was working even with the error. Now it isn't doing anything at all, won't even load.

There is an error in the CSS editor and I can not fix it!

Please help me, it's really annoying me, I've been looking through it for hours changing things.

Here is the codepen: http://codepen.io/joecox91/pen/GrJXQX

Sorry I can't remember how to embed the codepen into the question!

    @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400');

* {
  padding:0;
  margin:0;
  text-decoration:none;
  box-sizing:border-box;
}
body, html {
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}

header {
  background:#ffffff;
  border-bottom:1px solid #cccccc;
}

/* flex-flow: flex-direction flex-wrap */

.container {
  display:-webkit-flex;
  display:flex;
  justify-content:center;
  flex-flow: row wrap;
}

/* flex:flex-grow flex-shrink flex-basis */

.container section {
  height:auto;
  flex-grow:1;
  padding:20px 0;
  flex-shrink:1;
  flex-wrap:wrap;
}

.two {
  align-content:space-around;
  margin:40px 20px;
  font-family: 'Roboto Mono', monospace;
}



#content {
  padding:20px;
  width:60%;
}

#sidebar {
  background:black;
  width:20%;
}

// .container section:nth-child(2n) {
//   background:black;
// }

#header {
  display: flex;
  height:100%;
  align-items:center;
  justify-content: center;
  flex-flow:column wrap;
  font-family:helvetica;

  h1 {
    font-size:2em;
    letter-spacing:1.5px;
  }

  h2 {
    font-size:1.2em;
  }
}

#nav {
  display:flex;
  justify-content:center;
  align-items:center;
  a {
    padding:20px;
    color:#aaaaaa;
    font-family:helvetica;
    font-size:14px;
    margin-right:1px;
    text-transform:uppercase;
    border-bottom:2px solid white;
    transition:0.2s ease-out;

    &.active {
      border-bottom:2px solid black;
      color:black;
    }

    &:last-child {
      margin-right:0;
      margin-left:20px;
      border:1px solid #aaaaaa;
      border-radius:5px;

      &.active {
        border:1px solid black;
      }
    }

    &:hover {
      color:black;
      transition:0.2s ease-out;

      &:last-child {
        border:1px solid black;
      }
    }
  }


}

.spin1 {
        position:relative;
  animation:menutate 1.5s infinite;
animation-timing-function: linear;
        top:-1px;
         left:10px;
        width:1px;
  border-top:5px solid rgba(0,0,0,0);
  border-right:5px solid white;
  border-left:5px solid white;
  border-bottom:5px solid rgba(0,0,0,0);

        background:black;
      }

#mobile-menu {
  display:none;
}

#mobile-header {
}

@keyframes menutate {
  0% {
    transform:rotate(0);
  }

  100% {
    transform:rotate(360deg);
  }
}


#navi {
  display:none;
}


  @media screen and (max-width:720px) {

    .container,
    .two, {
    flex-flow:column wrap;
    }

    #content {
      width:100%;
    }

    #sidebar {
      width:100%;
    }

    #navi {
      position:absolute;
      display:block;
      height:100%;
      top:0;
      left:0;
      background:deepskyblue;
      width:80%;
      transform:translate(-100%);
      z-index:10000;
    }

    #navi.extend {
      box-shadow:0px 0px 10px 10px rgba(0,0,0,0.4);
    }

    #header {
      justify-content:flex-end;
      align-items:flex-end;
      padding-right:20px;

      h1 {
        padding:0;
        margin:0;
      }
    }

    #nav {
      display:none;
    }

    .mobile-hide {
      display:none;
    }

    body {
      position:relative;
      transform:translate(0);
      transition:0.3s ease-out;
    }


    body.extend {
      transform:translateX(80%);
      transition:0.3s ease-out;
    }

    #mobile-menu {
      position:fixed;
      top:22px;
      left:20px;
      display:block;
      height:50px;
      overflow:none;
      width:50px;
      padding:8px;
      z-index:500000;
      transition:0.2s ease;
      filter: opacity(1);

      &.extend {
        transform:translateX(-180%);
        transition:0.4s ease;
      }

      &:hover {
        cursor:pointer;
        transition:0.5s ease;
        filter:opacity(0.6);
      }

      span {
        position:absolute;
        height:4px;
        background:black;
        width:40px;
        text-align:center;
        transition:0.5s ease;

        &.menu-animate {
          transition:0.5s ease;
        }

      &:hover {
        cursor:pointer;
      }

        &:last-child {
          border:none;
          font-size:12px;
          background:none;
          height:auto;
          width:40px;
          top:38px;
          text-align:center;
        }
       
        &:nth-child(1) {
          top:8px;

          &.menu-animate {
            top:13px;
            transform:rotate(45deg);
          }
        }

        &:nth-child(2) {
          top:18px;

           &.menu-animate {
             top:13px;
            transform:rotate(-45deg);
          }
        }

        &:nth-child(3) {
          top:28px;
             &.menu-animate {
            top:13px;
            filter:opacity(0);
          }
        }
      }

    
  }
  
}

There is the SASS, or half SASS. The problem I'm getting is: 

Invalid CSS after "... position:fixed": expected "{", was ";"

This makes no sense to me! Why would it be expecting an opening curly bracket anywhere? After position:fixed... What is going on?

Send help!

Thank you

Upvotes: 0

Views: 574

Answers (1)

Chris Estreich
Chris Estreich

Reputation: 66

The issue is that you have some strange spacing characters on few lines of your SCSS - this is tripping up Sass. If you replace those with proper spaces things seem to work:

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400');

* {
  padding:0;
  margin:0;
  text-decoration:none;
  box-sizing:border-box;
}
body, html {
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}

header {
  background:#ffffff;
  border-bottom:1px solid #cccccc;
}

/* flex-flow: flex-direction flex-wrap */

.container {
  display:-webkit-flex;
  display:flex;
  justify-content:center;
  flex-flow: row wrap;
}

/* flex:flex-grow flex-shrink flex-basis */

.container section {
  height:auto;
  flex-grow:1;
  padding:20px 0;
  flex-shrink:1;
  flex-wrap:wrap;
}

.two {
  align-content:space-around;
  margin:40px 20px;
  font-family: 'Roboto Mono', monospace;
}



#content {
  padding:20px;
  width:60%;
}

#sidebar {
  background:black;
  width:20%;
}

// .container section:nth-child(2n) {
//   background:black;
// }

#header {
  display: flex;
  height:100%;
  align-items:center;
  justify-content: center;
  flex-flow:column wrap;
  font-family:helvetica;

  h1 {
    font-size:2em;
    letter-spacing:1.5px;
  }

  h2 {
    font-size:1.2em;
  }
}

#nav {
  display:flex;
  justify-content:center;
  align-items:center;
  a {
    padding:20px;
    color:#aaaaaa;
    font-family:helvetica;
    font-size:14px;
    margin-right:1px;
    text-transform:uppercase;
    border-bottom:2px solid white;
    transition:0.2s ease-out;

    &.active {
      border-bottom:2px solid black;
      color:black;
    }

    &:last-child {
      margin-right:0;
      margin-left:20px;
      border:1px solid #aaaaaa;
      border-radius:5px;

      &.active {
        border:1px solid black;
      }
    }

    &:hover {
      color:black;
      transition:0.2s ease-out;

      &:last-child {
        border:1px solid black;
      }
    }
  }


}

.spin1 {
        position:relative;
  animation:menutate 1.5s infinite;
animation-timing-function: linear;
        top:-1px;
         left:10px;
        width:1px;
  border-top:5px solid rgba(0,0,0,0);
  border-right:5px solid white;
  border-left:5px solid white;
  border-bottom:5px solid rgba(0,0,0,0);

        background:black;
      }

#mobile-menu {
  display:none;
}

#mobile-header {
}

@keyframes menutate {
  0% {
    transform:rotate(0);
  }

  100% {
    transform:rotate(360deg);
  }
}


#navi {
  display:none;
}


  @media screen and (max-width:720px) {

    .container,
    .two, {
    flex-flow:column wrap;
    }

    #content {
      width:100%;
    }

    #sidebar {
      width:100%;
    }

    #navi {
      position:absolute;
      display:block;
      height:100%;
      top:0;
      left:0;
      background:deepskyblue;
      width:80%;
      transform:translate(-100%);
      z-index:10000;
    }

    #navi.extend {
      box-shadow:0px 0px 10px 10px rgba(0,0,0,0.4);
    }

    #header {
      justify-content:flex-end;
      align-items:flex-end;
      padding-right:20px;

      h1 {
        padding:0;
        margin:0;
      }
    }

    #nav {
      display:none;
    }

    .mobile-hide {
      display:none;
    }

    body {
      position:relative;
      transform:translate(0);
      transition:0.3s ease-out;
    }


    body.extend {
      transform:translateX(80%);
      transition:0.3s ease-out;
    }

    #mobile-menu {
      position:fixed;
      top:22px;
      left:20px;
      display:block;
      height:50px;
      overflow:none;
      width:50px;
      padding:8px;
      z-index:500000;
      transition:0.2s ease;
      filter: opacity(1);

      &.extend {
        transform:translateX(-180%);
        transition:0.4s ease;
      }

      &:hover {
        cursor:pointer;
        transition:0.5s ease;
        filter:opacity(0.6);
      }

      span {
        position:absolute;
        height:4px;
        background:black;
        width:40px;
        text-align:center;
        transition:0.5s ease;

        &.menu-animate {
          transition:0.5s ease;
        }

      &:hover {
        cursor:pointer;
      }

        &:last-child {
          border:none;
          font-size:12px;
          background:none;
          height:auto;
          width:40px;
          top:38px;
          text-align:center;
        }

        &:nth-child(1) {
          top:8px;

          &.menu-animate {
            top:13px;
            transform:rotate(45deg);
          }
        }

        &:nth-child(2) {
          top:18px;

           &.menu-animate {
             top:13px;
            transform:rotate(-45deg);
          }
        }

        &:nth-child(3) {
          top:28px;
             &.menu-animate {
            top:13px;
            filter:opacity(0);
          }
        }
      }
  }
}

Here's the Codepen with the fix.

I recommend using an editor with "Show Invisibles" turned on so you can easily see issues like this.

Upvotes: 4

Related Questions