Что эквивалентно в CSS выражению SASS / SCSS "& $"? - PullRequest
Новая
       16

Что эквивалентно в CSS выражению SASS / SCSS "& $"?

0 голосов
/ 31 мая 2018

Здравствуйте. Я пытаюсь понять, как работает компонент material-ui, и я сталкиваюсь со следующим стилем: 

root: (0, _extends3.default)({}, theme.typography.subheading, {  
  height: theme.spacing.unit * 3,  
  boxSizing: 'content-box',  
  overflow: 'hidden',  
  textOverflow: 'ellipsis',  
  whiteSpace: 'nowrap',  
  '&:hover': {  
    backgroundColor: theme.palette.text.lightDivider  
  },  
  '&$selected': {  
    backgroundColor: theme.palette.text.divider  
  }  
 }),  
 selected: {}  
}

Я хочу знать, что означает "& $ selected" в синтаксисе CSS.,Проблема, с которой я сталкиваюсь, заключается в том, что я хочу перезаписать цвет фона, передавая стиль выбранному, но он не перезаписывает его.Я хочу понять, что здесь происходит за кулисами.Спасибо !!!

1 Ответ

0 голосов
/ 01 июня 2018

Нет эквивалента для выражения &$selected в css.&$ Не является специальным символом в обоих языках.&$selected в scss объединить из 2-х частей:

  1. &: sccc - сразу после того, как родительский селектор вставит новые субселекторы.пример:

scss: 

main-selector {
    color: blue;

    &.sub-selector {
        display: block;
    }
}

эквивалент css: 

main-selector {
    color: blue;
}
main-selector.sub-selector {
    display: block;
}

Как вы можете видетьсимвол & вообще отсутствует в css, а только в коде scss.

$selected - это означает переменную в scss.В коде CSS вы не сможете узнать, использовались ли переменные в исходном файле scss.эта переменная может представлять все, что есть в css, включая имена селекторов, определенные цвета, массивы значений, индексы, счетчик и т. д. Я не могу сказать вам, что эта переменная представляет в вашем коде в соответствии с опубликованным вами кодом, даже чтоЯ знаю, что он используется, единственное, что я знаю о его значении в вашем случае, это то, что он включает селектор (и я не знаю, какой именно).

Это важноВы должны понимать, что большинство новых символов в scss создано для сохранения строк кода CSS (и я думаю, что вы делаете).Но чтобы точно знать окончательную компиляцию css из кода scss, вам нужно опубликовать весь код scss, включая импорт файлов из самого файла scss.

Надеюсь, теперь я сделал это более четко.

...