Less.js: 하위 미디어 쿼리에 변수가 사용되는 경우 "또는" 조건이 포함된 잘못된 중첩 미디어 쿼리 병합

이것은 버그라기보다 기능 요청에 가깝습니다. Less는 ~"" (미디어 쿼리뿐만 아니라 어디에서나 ) 내부에 있는 내용을 이해하지 못합니다. 따라서 Less는 쉼표나 기타 특수 기호에 대해 전혀 알지 못할 것으로 예상됩니다.

기술적으로, 위와 같은 코드("이스케이프된 문자열의 미디어 쿼리 목록")는 적절한 코드로 간주된 적이 없는 오래된 단점/구문 해결 방법과 비슷합니다( ~"" 자체 때문에 다시 한 번). 오늘날의 Less에서 동일한 것을 달성하기 위한 적절한 패턴은 "마법 값 변수" 대신 익명/분리된 규칙 집합/믹스인을 사용하는 것입니다. 예:

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

또는 이와 유사한 방법.

#1421 및 유사한 문제/요청과 관련이 있습니다.

기능 요청(제안된 경우)이더라도 이 기능은 어쨌든 ~"" 대신 다른 구문을 사용해야 합니다. 즉, 예제는 위에서 예상한 대로 작동하지 않아야 하므로 " 기능 요청"(FR은 조금 더 통찰력이 필요하기 때문에).

#1421에 병합할 수 있습니까?

@seven-phase-max 이 문제를 해결해 주셔서 감사합니다. 이스케이프된 문자열이 있는 변수 대신 다른 ".highdpi" 믹스인을 사용하도록 믹스인을 변경하겠습니다.

@seven-phases-max 여기에 두 가지 개별 문제/기능 요청이 있다고 생각하므로 이를 지정하지 않고 #1421에 병합해야 하는지 확실하지 않습니다.

1. Less 파서가 표현식과 목록에 대해 더 느슨하도록 허용합니다. 예를 들어 목록이 미디어 쿼리 값 또는 선택기로 구성되도록 허용합니다. 따라서 미디어 쿼리를 변수로 만들려는 경우 문자열 이스케이프가 요구 사항일 필요는 없습니다. (일반적인 요구 사항입니다.) 이것은 #1421이며 @media 예제는 해당 문제에 다른 것이 추가될 수 있습니다.
2. 중첩 된 미디어 쿼리 값의 병합 목록 (에 따라 #1 만에서 실패 / 별도의 패스를해야 #1 . 수행하는 데 있지만 그 #1 , #2 논리적인 다음 단계이므로 여기 #2964에서 추적할 수 있습니다.

본질적으로 거의 동일한 문제이기 때문에 여기에서 #3059를 참조하십시오. 즉, 기본적으로 질문은 "변수가 값으로 대체된 후 @media 및 @supports 쿼리 등의 전체 기능을 재분석 할 수 있습니까?"입니다. (이것은 임의의 순간에 임의의 문자열에서 사용할 수 있도록 파서 자체의 주요 리팩토링을 요구하거나 각 특정 노드 및 해당 eval/css-gen 함수에서 파싱 코드를 복제해야 합니다.)

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.