Sass导航嵌套不起作用

Question

Using HTML5 nav element and nesting SASS properties. None of the properties are being applied to the html. Not sure where the issue is.

Here is my sass:

nav{height:4em;width:100%;position:relative;padding:10px;z-index:1000;
  ul{list-style:none;}
  li{display:inline;font-size:130%;"
   a{color:#333;text-decoration:none; padding:5px;
    &:hover{border-bottom:#f8a593 2px solid;}
    &:active{border-bottom:#fd5d39 2px solid;}
}

And here is my html:

  <nav>
    <ul>
       <li><a class="active-link" href="index.html">Home</a></li>
       <li><a href="work.html">Work</a></li>
       <li><a href="#.html">Le Me</a></li>
    </ul>
  </nav>

Answer 1

Isn't it because on that line:

li{display:inline;font-size:130%;"

the latest character should be } , not " . Once I changed it, your code is compiled to:

nav {
  height: 4em;
  width: 100%;
  position: relative;
  padding: 10px;
  z-index: 1000; }
  nav ul {
    list-style: none; }
  nav li {
    display: inline;
    font-size: 130%; }
  nav li a {
    color: #333;
    text-decoration: none;
    padding: 5px; }
  nav:hover {
    border-bottom: #f8a593 2px solid; }
  nav:active {
    border-bottom: #fd5d39 2px solid; }

Is that what you want to achieve?