Sass导航嵌套不起作用

时间:2013-08-18 20:44:55

标签: html5 sass nav nested

使用HTML5 nav元素并嵌套SASS属性。没有属性应用于html。不确定问题出在哪里。

这是我的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;}
}

这是我的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>

1 个答案:

答案 0 :(得分:2)

不是因为在那条线上:

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

最新字符应为} ,而不是。一旦我更改了它,您的代码就会被编译为:

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

这是你想要达到的目标吗?