Не работает SCSS с условием :hover

Чтоб убрать подчеркивание text-decoration нужно ставить не на параграф, а на ссылку а. Изменять цвет также правильнее будет на ссылке, но будет работать и так:

a, a:hover {
  text-decoration: none; 
}
p.link {
  color: #aaa;
  width: 100px;
  &:hover {
    color: #c00;
  }
}

HO! В данном случае я бы посоветовал избавиться от элемента р - он здесь лишний со всех сторон. Я полагаю, что Вы его добавили из-за его свойств блокового элемента (margin, padding и т.д.), но это легко навешивается на саму ссылку. Код получается и чище, и правильнее:

a(href='#').small-grey-text.link US Politics
a.link {
  text-decoration: none; 
  color: #aaa;
  display: block;
  margin: 1em;
  &:hover {
    color: #c00;
  }
}

DEMO

а почему не сделать так?

jade

a(href='#').small-grey-text.link US Politics

css

a {
  text-decoration: none; 
  color: #aaa;
  width: 100px;
  &:hover {
    color: #c00;
  }
}

или же scss

a {
  text-decoration: none;
  p {
    &.link {
      color: #aaa;
      width: 100px;
      &:hover {
        color: #c00;
      }
    }
  }
}

jade

a(href='#')
  p.small-grey-text.link US Politics

• хотя на р не желательно вешать классы