Как настроить метку в SASS - PullRequest
Новая
       6

Как настроить метку в SASS

0 голосов
/ 04 октября 2019

У меня есть следующее 

<body>
  <div class="app" theme="light">
    <div class="container">¨
      <div class="wrapper">
        <p class="text">something></p>
      </div>
    </div>
  </div>
</body>

Как мне нацелить определенный div в SASS, даже если это несколько делений. Я имею в виду что-то вроде этого. 

p
  color: red
  [theme="dark"] &
    color: green

Я имею в виду изменение цвета на основе светлой / темной темы. Много вещей намного ниже этого "app" div. Я думаю, что в SASS можно было как-то указать целевой родительский div (даже если он находится за большим количеством тегов), но я не могу понять это.

Ответы [ 2 ]

1 голос
/ 04 октября 2019

это будет: 

div 
  color: red    
  &[theme="light"]
    color: green

, который скомпилирован следующим образом: 

div {
  color: red;
}
div[theme="light"] {
  color: green;
}

Посмотрите, что он делает с простым CSS. 

div {
  color: red;
}
div[theme="light"] {
  color: green;
}
  <div class="app" theme="light">
    <div class="container">¨
      <div class="wrapper">
        <p class="text">something</p>        
      </div>
    </div>
  </div>

, но он по-прежнему отображает красный цвет, даже в простом CSS, вам нужно явно увеличить специфику CSS, чтобы увидеть, как он работает.

Это может бытьздесь: 

div 
  color: red    
  &[theme="light"] div
    color: green

простой CSS-демо 

div {
  color: red;
}
div[theme="light"] div {
  color: green;
}
  <div class="app" theme="light">
    <div class="container">¨
      <div class="wrapper">
        <p class="text">something</p>        
      </div>
    </div>
  </div>

Это может не ответить на ваши проблемы, но, по крайней мере, вы должны знать, как это работает.

1 голос
/ 04 октября 2019

CSS работает только каскадно, но вы можете использовать: 

.app 
  p
    color: red
  &[theme="dark"]
  p
    color: green

Таким образом, вы говорите, что все p элементы в div.app должны иметь красный цвет, но если div.app также имеетtheme атрибут со значением dark, тогда цвет для всех p должен быть зеленым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...