방지 말대꾸는 단위없는 숫자

Question

와 유닛 수를 추가하는 나는 깔끔한 부르봉 왕가의 omega() 기능을 몇 가지 이상한 문제가되었고, 그래서 내가 nth() 기능의 사용을 본 source code로 보았다.

input.scss

.foo { 
    content: nth(5n + 3, 1); 
} 

이

output.css

.foo { 
    content: 8n; 
} 

012를 생성합니다 :

SassMeister I see that all Sass engines produce the same weird output에서 nth 시도 후

보시다시피, 제 표현식에 이상한 "수학"이 있습니다. 비록 수학적으로 이해가되지 않지만 Sass가 두 요소를 결합하려고하는 것처럼 보입니다.

이것은 내가 4n+4의 의사 선택 (... 모든 4,8,12 적용 후 처음 4를 건너)을 만들 @include omega(4n+4)를 기대하는 것처럼,이 기능을 사용하여 유지 mixin 나쁜 결과를 초래하지만, 대신 8n을 만듭니다 (여덟 번째 요소마다 적용).

이것이 왜 이렇게되어야하는 이유인지 또는이 것이 초기 사양일까요? 그리고 피할 수 있습니까?

Answer 1

원본 게시물에는 두 가지 질문이 있습니다.이 질문은 두 번째에 대한 답변입니다 (Sass를 사용하지 않는 표현 방법). 첫 번째 질문에 대한 추가 답변을 자유롭게 게시하십시오 (Sass가 왜 그렇게 계산을하는지).

기본적으로 달성하고 싶은 것은 Sass가 표현식을 일반 CSS로 변경되지 않고 전달되는 문자열로 처리하도록하는 것입니다. 표현식을 인용하는 것은 해결책이 아니지만 Sass에는 두 가지 종류의 문자열이 있습니다. 인용되지 않은 문자열과 인용 된 문자열입니다.

공동 작업자

방법 3n + 2의 인용되지 않은 문자열을 만드는 방법 저를 보여 주었다 :

#{3n} + #{2} 

이 세 가지 캐릭터 생성 : 3n, + 및 2, 다음 하나에 연결됩니다. 문제의 코드에 대한 최종 해결책은 다음과 같습니다.

.foo { 
    content: nth(#{5n} + #{3}, 1); 
}