css - 유틸리티 생성을 위해 SASS에서 '빈'클래스 이름 허용

우리는 일부 유틸리티를 만들려고 노력하고 있으며 'u :'를 사용할 때 이전에 접두사를 지정 했으므로 HTML에서 다음과 같이 보일 것입니다.

<div class="u:bg-red"></div>

오늘 우리는이 예제에서 접두사를 삭제하고 'bg-red'만 사용하려고했지만 SASS는 빈 클래스 이름을 허용하지 않습니다.

이것은 현재 우리가 생성하는 방법입니다 :

.u\: {
    @include group();
}

(포함 된 그룹은 모든 유틸리티를 포함하는 믹스 인입니다)

실제 속성은 믹스 인으로 설정되며 다음과 같습니다 :

&bg-red {
    ...
}

믹스 인에 점을 추가하지 않는 이유는 다음을 사용하여 반응 형 유틸리티를 생성하기 때문입니다.

.u\@lg\: {
    @include screen-large() {
        @include group();
    }
}

기본적으로 다음을 수행하고 싶습니다.

. {
    @include group();
}
.\@lg\: {
    @include screen-large() {
        @include group();
    }
}

그러나 SASS는 빈 클래스 이름을 허용하지 않습니다. 우리는 모든 종류의 탈출을 시도했지만 영리하지만 성공하지 못했습니다!

가장 가까운 것은 :

.\ {
}

그러나 속성 앞에 공백이 생깁니다.

제안 해 주셔서 감사합니다!