Что значит символ & перед селектором?

Question

[i_want_to_know_everything]

Что значит символ & перед селектором?

&.owl-loaded{
    display: block;
  }

  &.owl-loading{
    opacity: 0;
    display: block;
  }

  &.owl-hidden{
    opacity: 0;
  }

Answer 1

[Назар Мокринский]

Значит что название тэга &.
Но вероятнее всего, что это не CSS, а SCSS, в котором так обозначается родительский селектор.

Comments

[i_want_to_know_everything]

Назар Мокринский: В том то и дело, что это СSS,
можно смело сносить этот символ?

[Назар Мокринский]

i_want_to_know_everything: Не может это быть CSS, тэгов с таким названием быть не может (если мне не изменяет память), так что это либо опечатка, либо имеется какой-то пост-процессор, который это превращает в нормальный CSS.

[i_want_to_know_everything]

Назар Мокринский: css на обычном HTML шаблоне
demo2.transvelo.in/html/rimbus/assets/css/owl.caro...
но понял, спасибо

[D']

i_want_to_know_everything: это scss файл с расширением ".css"

[bromzh]

Ещё может быть LESS, там такое же

[Александр Зачиналов]

В Stylus тоже используется

[Назар Мокринский]

Сергей Сергеев: Если мы говорим о чистом CSS, то ничем кроме тэга это быть не может. Но такого тэга тоже быть не может, написали же.

Answer 2

[GoodProject]

Это фиша препроцессора Sass с синтаксисом SCSS.
Например ты создаешь кнопку:

.button {

}

И тебе нужно задать для этой кнопки свойства при наведении на неё:

.button {
    &:hover {

    }
}

Т.е вместо знака & в данном случае подставится .button после компиляции данного кода.

Удобная штука, попробуй обязон, тем более SCSS мало чем отличается от CSS по синтаксису, сейчас каждый уважающий себя верстальщик должен пользоваться такой штукой. Особенно нравится вложенность, не нужно постоянно в строку перечислять все классы, просто создал один класс header, и уже внутрь него добавляешь нужные классы, типа:

header {
    h1 {
    //свойство:значение;
    //свойство:значение;
    }
    p {
    //свойство:значение;
    //свойство:значение;
    }
}

В CSS будет выглядеть так:

header {
}
header h1 {
}
header p {
}

Т.е тебе придется 3 раза написать header, это бесит, лично меня.

Comments

[Сергей delphinpro]

Сергей Сергеев: Нормальная IDE показывает всю вложенность в пределах видимости https://yadi.sk/i/v7lkdpZRjimKC
И о не закрытой скобке сражу же предупреждает.
Хотя если вы пользуетесь блокнотом.....

[Сергей delphinpro]

Сергей Сергеев: "можно найти" и "сразу предупреждает" - немного разные вещи :) Кроме того sass просто -напросто откажется компилировать некорректный исходник.
Я хочу сказать, что проблема незакрытой скобки - это следствие неправильного выбора инструмента, а потому и проблемой-то не является.

[GoodProject]

Сергей Сергеев: у меня не возникало подобных проблем. Дело только в тебе.