Как задать переменные для :root в sass?

Question

[Breeze1]

Хочу использовать css переменные в sass. Возникла проблема, при попытке записать переменные в root
Получаю ошибку постоянно, хотя вроде должно работать
(Invalid CSS after "$basewidth: 960px;": expected 1 selector or at-rule, was "root:)
Таб перед переменной стоит, так сайт просто текст отобразил

:root 
	$basewidth: 960px

&:root 
	$basewidth: 960px

Comments

[Сергей delphinpro]

А в чем смысл сего?
Глобальную переменную вы и так можете объявить вне всяких селекторов.

$basewidth: 960px;

Потом в любом месте:

.selector {
  width: $basewidth;
}

[Ankhena]

В :root пишут кастомные свойства CSS

:root {
  --basewidth: 960px;
}

Писать препроцессорные переменные в root не имеет смысла, в результате будет пусто.

Answer 1

[Aetae]

Не

:root
$basewidth: 960px

а, очевидно,

:root
  $basewidth: 960px

Только смысла в этом никакого: sass переменные - это не css переменные.. Будучи заданны в рамках блока - они действуют в рамках блока.
Т.е. тебе придётся писать так:

:root
  $basewidth: 960px
  div 
    width: $basewidth

А так - работать не будет:

:root
  $basewidth: 960px
div 
  width: $basewidth

Просто задай переменные в начале файла и не парь мозги.
Или используй css-перемененные если очень надо.

Comments

[imko]

в рамках блока

кода. А то неоднозначно читается)

[Breeze1]

Я написал, что там стоит tab, просто редактор на этом сайте так отобразил, проблема была в том, что надо писать ::root, а не :root

[Aetae]

Breeze1, нет, должно быть именно :root. Это псевдокласс, а не псевдоэлемент. Если у тебя какая-то хрень не переваривает его - попробуй обновить эту самую хрень, а не уродуй свой код. Если обновление хрени не помогло - выкинь её и возьми что-нить рабочее.

Answer 2

[Breeze1]

Нужно в sass синтаксисе записывать через двойное двоеточие, тогда ошибка уходит

::root
   $basewidth: 960px