Что означает "&" в CSS и почему я получаю ошибки?

Question

CSS

button{
  margin-top: 4em;
  background-color: #ff3a3a;
  outline: none;
  .active &{
    border-bottom: 1px solid #ccc;
    border-radius: 0.3rem 0.3rem 0 0;
  }
}

Я нашел шаблон веб-сайта на codepen.io, но когда я помещаю именно этот код в свою среду IDE - у меня появляется ошибка в .active & {". Я также включил эти библиотеки, я что-то пропустил?

    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css'>
    <link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/78060/animate.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="1.css">

Answer 1

Единственное, что я знаю о & является то, что это обычно с <span>&times;</span, который создает 'X'

Answer 2

Sass или s css отображается сервером, а не в браузере.
Таким образом, поскольку в вашем проекте это можно сделать в виде файла css (путем изменения расширения) и затем преобразовать его в css по приглашению cmd

• Установить sass по npm install -g sass из командной строки (убедитесь, что вы npm уже установлены, в противном случае сначала установите npm)
• преобразовать расширение вашего css файла в s css, например -
  

1.s css

button{
  margin-top: 4em;
  background-color: #ff3a3a;
  outline: none;
  .active &{
    border-bottom: 1px solid #ccc;
    border-radius: 0.3rem 0.3rem 0 0;
  }
}

• Теперь запустите эту команду в командной строке sass 1.scss 1.css (убедитесь, что путь к тому месту, где вы открыли или запустили терминал командной строки cmd)
• Посмотрите что у вас есть файл css, созданный в том же месте. ссылка 1. css файл & будет работать