SASS / SCSS - создание селектора, который будет «отступать» для изменения родителя селектора

Question

Я хотел бы содержать все соответствующие стили для селектора в одном блоке кода, чтобы на него можно было легко ссылаться.

В моем приложении эффективные стили селекторов будут сильно изменены в зависимости от контекста, в котором он находится. Например, давайте предположим, что это CSS:

.container.theme-dark .message
{
    font-size: 16px;
    background-color: black;
    color: white;
}

.container.theme-light .message
{
    font-size: 16px;
    background-color: white;
    color: black;
}

Тогда представьте, что у меня есть следующий HTML:

<div>
    <div class="container theme-dark">
        <div class="message">Hello World</div>
    </div>
    <div class="container theme-light">
        <div class="message">Hello World</div>
    </div>
</div>

Прямо сейчас с помощью SCSS я бы создал соответствующий CSS следующим образом:

.container
{
    &.theme-dark
    {
        .message
        {
            background-color: black;
            color: white;
        }
    }

    &.theme-light
    {
        .message
        {
            background-color: white;
            color: black;
        }
    }

    .message
    {
        font-size: 16px;
    }
}

Я хочу иметь возможность генерировать этот CSS с использованием SCSS со всей необходимой информацией для элемента .message в одном месте. Например (с использованием искусственного оператора $, который будет делать то, что я пытаюсь выполнить):

.container
{
    .message
    {
        font-size: 16px;

        $.theme-light
        {
            background-color: white;
            color: black;
        }

        $.theme-dark
        {
            background-color: black;
            color: white;
        }
    }
}

Есть идеи?

Answer 1

Эта организация может быть достигнута, если вы используете sass программно:

$themes: light dark;

.container {
    @for $i from 1 through length($themes) {
        &.theme-#{nth($themes,$i)} {
            .message {
                font-size: 16px;
                @if nth($themes,$i) == light {
                    background-color: white;
                    color: black;
                } @else if nth($themes,$i) == dark {
                    background-color: black;
                    color: white;
                }
            }
        }
    }
}

Это генерирует:

.container.theme-light .message {
  font-size: 16px;
  background-color: white;
  color: black;
}
.container.theme-dark .message {
  font-size: 16px;
  background-color: black;
  color: white;
}

Вложенный цикл автоматически группирует детали на каждом уровне в один и тот же блок кода. Это также масштабируется до нескольких уровней вложенности. Критическим моментом является то, что во внутренних циклах вы можете ссылаться на селекторы внешних циклов.

Answer 2

В конце концов я нашел этот GitHub: https://github.com/imkremen/sass-parent-append/blob/master/parrent-append.scss

Который я адаптировал к этому решению:

@function str-to-list($string, $separator: ' ', $startAt: 1) 
{
    $workStr: str-slice($string, $startAt);
    $list: ();
    $indexOfFirstSpace: str-index($workStr, $separator);
    @if ($indexOfFirstSpace == null)
    {
        $list: ($workStr);
    }
    @else
    {
        $list: (str-slice($workStr, 1, $indexOfFirstSpace - 1));
        $list: join($list, str-to-list($workStr, $startAt: $indexOfFirstSpace + 1));
    }
    @return $list;
}

@function getBase($appendix)
{
    $parentSelector: str-to-list(#{&});
    $pos: (length($parentSelector) - 1);
    $selector: set-nth($parentSelector, $pos, nth($parentSelector, $pos) + $appendix);
    @return $selector;
}

@mixin base($appendix)
{
    @at-root #{getBase($appendix)}
   {
      @content;
   }
}

Что я могу затем использовать следующим образом:

.container
{
    .message
    {
        font-size: 16px;
    }

    @include base(".theme-light")
    {
        background-color: white;
        color: black;
    }

    @include base(".theme-dark")
    {
        background-color: black;
        color: white;
    }
}

, который компилируется в это:

.container .message
{
    font-size: 16px;
}

.container.theme-light .message
{
    background-color: white;
    color: black;
}

.container.theme-dark .message
{
    background-color: black;
    color: white;
}

Answer 3

Я думаю, это может сработать, и это как то, что вы говорите?(Мне бы сейчас помогло, если бы вы пометили каждый пример как «Идеальный вывод CSS», «Текущий SCSS, слишком много .message блоков» и «Идеальный формат SCSS»)

.container
{
    @at-root .message
    {
        font-size: 16px;

        .theme-light &
        {
            background-color: white;
            color: black;
        }

        .theme-dark &
        {
            background-color: black;
            color: white;
        }
    }
}

с помощью @at-root там он сгенерирует .theme-light .message, что может быть слишком допустимо для некоторых случаев использования, поэтому не идеальное решение ...

https://codepen.io/anon/pen/ZMxjEq

В основном & заменяется наполный путь дерева, поэтому .container .message, который без @at-root, сгенерирует .theme-light .container .message, который не работает со структурой.Возможно, также рассмотрим это, что делает разумный компромисс, я бы сказал:

.container
{
    .message
    {
        font-size: 16px;
    }
    @at-root .message
    {
        .theme-dark
        {
            ...
        }

        .theme-light
        {
            ...
        }
    }
}

Это , по-видимому, своего рода хакерское решение , но, очевидно, работает

Этостраница также может иметь более качественное руководство