Условие на основе класса SCSS / SASS

Я хочу изменить цвет на основе класса предков. Что я хочу получить в CSS:

section.container-story .story-head .content h2 {
    color:#FF0000;
}
section.container-story.category_1 .story-head .content h2 {
    color:#00FF00;
}

Мой код SCSS

section.container-story{

    $story-color: #FF0000;

    .story-head{

        .content{

            h2{
                color: $story-color;

                .category_1 &{
                    color: #00FF00;
                }
            }
        }
    }
}

Есть ли способ добиться этого?

Вот мое нерабочее перо: https://codepen.io/will83/pen/pwNzzQ

Спасибо


class sass ancestor
person William Ode    schedule 15.06.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Просто используйте символ &.

$story-color: #FF0000;

.story-head{
  .content{
    h2{
      section.container-story &{
        color: $story-color;
      }
      section.container-story.category_1 &{
        color: #00FF00; 
      }
    }
  }
}
person dsaket    schedule 15.06.2017
comment
Да, но мне нужно переписать все дерево? На самом деле я ищу более приятный способ, если он существует - person William Ode; 15.06.2017
comment
Хотя это быстрое решение проблемы. Но я все еще ищу другой путь. - person dsaket; 15.06.2017
comment
Спасибо ! Но я потерял своего предка section.container-story для .story-head и других ниже... - person William Ode; 15.06.2017
comment
Нет, ты не потерял предка. Просто он определяется по-другому. - person dsaket; 15.06.2017