Css SASS代码问题

我一直在尝试学习flexbox，我在手机上乱搞了我的代码笔，然后发生了一些事情，我无法指出问题，但它一直给我一个错误，我一辈子都无法发现它！一切似乎都很好

代码并不令人惊讶，我还不擅长编码，它不枯燥，凌乱，可读性不强，还有其他任何东西，但它是有效的。即使出现错误，该页面仍能正常工作。现在它什么都不做，甚至不会加载

CSS编辑器中有一个错误，我无法修复它

请帮帮我，这真让我恼火，我已经看了好几个小时了

这是代码笔：

抱歉，我不记得如何将代码笔嵌入问题中

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

    
  }
  
}

这里有一个SASS，或者说半个SASS。我遇到的问题是：

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

这对我来说毫无意义！为什么它会期待一个开放的卷曲括号呢？后位置：固定。。。发生了什么事

快来帮忙

---

谢谢

问题在于，您的SCS的几行上有一些奇怪的空格字符-这是在绊倒SAS。如果用适当的空间替换这些空间，事情似乎会起作用：

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

带补丁的代码笔

---

我建议使用打开了“显示不可见”的编辑器，这样您就可以很容易地看到这样的问题。

问题是您的SCS的几行上有一些奇怪的空格字符-这会使SAS出错。如果用适当的空间替换这些空间，事情似乎会起作用：

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

带补丁的代码笔

---

我建议使用打开“显示不可见”的编辑器，以便您可以轻松查看类似的问题。

啊，太棒了，非常感谢。这一定是我在手机上编辑累了的时候发生的。Enter-key在做各种奇怪的事情：（谢谢你啊，太棒了，非常感谢你。这一定是在我厌倦了在手机上编辑的时候发生的。Enter-key在做各种奇怪的事情：（谢谢你