Могу ли я создать элемент в SASS?

Question

Я понимаю, что в SASS я могу это сделать;

h3 { 
    font-size: 20px 
    margin-bottom: 10px 

    .some-parent-selector & { 
     font-size: 24px 
     margin-bottom: 20px 
    } 
} 

для создания этого кода;

h3 { 
    font-size: 20px; 
    margin-bottom: 10px; 
} 
.some-parent-selector h3 { 
    font-size: 24px; 
    margin-bottom: 20px; 
} 

Кто-нибудь знает, как я мог бы достичь этого с помощью элемента? В основном я хочу сделать это в SASS;

.some-parent-selector { 
    font-size: 24px 
    margin-bottom: 20px 

    a& { 
     ... 
    } 
} 

для изготовления этого кода;

.some-parent-selector { 
    font-size: 24px 
    margin-bottom: 20px 
} 
a.some-parent-selector { 
    ... 
} 

Я вижу вопрос, где я могу сделать это, только если я поставить пробел между элементом и амперсандом. Если я не сделаю ошибку, но я думаю, что в глубине САСС ее не понимают. Или мне нужно отформатировать ее лучше ...

Мне нужно это, потому что я работаю с некоторым кодом, где селектор появляется на странице, но каждый так часто присваивается привязному знаку ...

Любая помощь или рекомендация была бы принята с благодарностью?

Answer 1

Я пытаюсь использовать интерполяцию:

SASS

.some-parent-selector { 
     font-size: 24px; 
     margin-bottom: 20px; 

     a#{&}{ 
      margin-bottom: 20px 
     } 
    } 

Но родительский повтор и я получаю это:

выход

.some-parent-selector { 
    font-size: 24px; 
    margin-bottom: 20px; 
} 
.some-parent-selector a.some-parent-selector { 
    margin-bottom: 20px; 
} 

так я извлекаю селектор от своего родителя с @at-root директивы:

SASS

.some-parent-selector { 
    font-size: 24px; 
    margin-bottom: 20px; 

    @at-root a#{&}{ 
     margin-bottom: 20px 
    } 
} 

выход

.some-parent-selector { 
    font-size: 24px; 
    margin-bottom: 20px; 
} 
a.some-parent-selector { 
    margin-bottom: 20px; 
}