Less.js: 그룹 미디어 쿼리

진술을 재구성함으로써 의미를 잠재적으로 변경하지 않고 어떻게 할 수 있습니까?

의미가 바뀔 수 있다고 생각하지 않습니다. 이는 일반 중복 태그를 축소하는 것과 정확히 동일합니다. 예를 들어:

body {
    background: white;
}

body {
    padding: 0;
    margin: 0;
}

다음으로 축소됩니다.

body {
    background: white;
    padding: 0;
    margin: 0;
}

미디어 쿼리는 일반 요소 선택기 위에서 제어 계층 역할을 하는 특별한 최상위 선택기이기 때문에 더욱 그렇습니다. 기본적으로, 그것들은 하나의 의미만을 가지며 파일 내의 나머지 CSS의 영향을 받지 않습니다.

또한, 버블링된 미디어 쿼리의 순서를 이미 유지하고 있지 않고 정확히 동일한 쿼리에 대해 많은 중복 선택기를 생성할 뿐입니다. 처리가 끝날 때 버퍼링되고 단일 쿼리에 기록될 수 있다면 훨씬 더 깔끔해지고 더 작은 CSS 출력이 생성될 것입니다.

미디어 쿼리 내 선택기 복잡성에 대한 규칙은 무엇입니까? 할
쿼리가 복잡성을 높이고 모든 순서를 무시합니까? 아무데나 가리킬 수 있니
명세서?

기본적으로 그렇습니다. 미디어 선택기는 일반 스타일 규칙을 둘러싸고 쿼리 조건이 충족되는 경우에만 적용되는 IF 문과 같습니다. 예를 들어 브라우저의 너비가 특정 픽셀 수보다 작으면 쿼리 내의 규칙이 설정되고 기존 규칙을 무시합니다.

따라서 단일 스타일을 사용하는 동일한 쿼리를 많이 사용하는 것은 그 안에 모든 스타일이 포함된 하나의 쿼리와 기능적으로 동일합니다. 쿼리가 동일한 한.

다음은 Mozilla의 일부 문서입니다.

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

내 말은 이 예에서 입니다. div가 빨간색으로 바뀝니다. 즉, 미디어 쿼리(둘 다 화면에 대해)를 재정렬하면 CSS의 의미가 변경됩니다.

<strong i="6">@media</strong> screen {
    div {
        background-color: green;
    }
}

div {
     background-color: red;
}

<strong i="7">@media</strong> screen {
    div.pink {
        background-color: pink;
    }
}

규칙 집합이 서로 직접적으로 이어지는 경우에만 결합해야 합니다.

@Soviut의 원래 예제에는 없는 기능이므로 IMO에서 이 기능을 제한적으로 사용하도록 요청합니다.

동의하지만 이것이 버블링된 미디어 쿼리에 어떻게 적용되는지 모르겠습니다. 버블링된 쿼리는 약간의 구문 설탕이라는 것을 기억하십시오. 일반적으로 다른 선택기 내부에 미디어 쿼리를 포함할 수 없습니다. 따라서 버블링 쿼리가 발생할 때마다 동일한 버블링 쿼리를 도착하는 순서대로 그룹화하는 것으로 가정할 수 있습니다.

결합할 수 있는 버블링된 미디어 쿼리가 서로 옆에 두 개 있는 경우 적은 양으로 수행하는 것이 매우 명백할 것이라고 생각합니다. 미디어 쿼리를 결합하는 것이 안전하고 의미가 있는 실제 예를 제시할 수 있습니까? 그것들을 덜 분리되게 유지하려면?

레티나 이미지를 처리할 때 복잡한 미디어 쿼리를 믹스인 안에 래핑하고 스프라이트 믹스인을 만들었습니다. 그래서 우리는 이것을 여기저기에 가지고 있습니다... 출력 CSS를 증가시키지만 유지보수가 더 쉽습니다.

예를 들어 다음은 스프라이트 믹스인입니다.

.sprite(<strong i="7">@spritePath</strong>, <strong i="8">@hdpiPath</strong>, <strong i="9">@x</strong>, <strong i="10">@y</strong>, <strong i="11">@size</strong>: auto) {
    background-image: url(@spritePath);  
    background-repeat: no-repeat;
    background-position: -1 * <strong i="12">@x</strong> -1 * @y; // Negativize the value
    .background-size(@size);
    <strong i="13">@media</strong> <strong i="14">@mediaRetina</strong> {
        background-image: url(@hdpiPath);
    }
}

@mediaRetina 는 다음과 같습니다.

<strong i="19">@mediaRetina</strong>: ~"only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx)";

그런 다음 아래에서 다음과 같이 각 스프라이트 요소를 래핑하기 위해 더 많은 믹스인을 만듭니다.

#sprite
{
    .header-logo()
    {
        .sprite(<strong i="23">@globalSpritePath</strong>, <strong i="24">@global2XSpritePath</strong>, 22px, 0, 384px 288px);
        width: 94px;
        height: 59px;
    }
}

다음과 같이 다른 LESS 파일에서 사용하십시오.

h1 {
    width: 94px;
    height: 59px;

    a {
        #sprite > .header-logo();
    }

}

이 경우 생성된 CSS는 다음과 같습니다.

h1 a {
  background-image: url("/images/sprite-global.png");
  background-repeat: no-repeat;
  background-position: -22px 0;
  -webkit-background-size: 384px 288px;
  -moz-background-size: 384px 288px;
  -o-background-size: 384px 288px;
  background-size: 384px 288px;
  width: 94px;
  height: 59px;
}
<strong i="31">@media</strong> only screen and (-webkit-min-device-pixel-ratio: 1.3), 
       only screen and (min--moz-device-pixel-ratio: 1.3), 
       only screen and (-o-min-device-pixel-ratio: 4/3), 
       only screen and (min-device-pixel-ratio: 1.3), 
       only screen and (min-resolution: 124dpi), 
       only screen and (min-resolution: 1.3dppx) {
  h1 a {
    background-image: url("/images/[email protected]");
  }
}

이제 이 경우가 여러 번 반복된다고 상상해 보십시오. 그룹화 없이 이 추가 무게를 완화하는 유일한 방법은 모든 망막 스타일을 전용 LESS 파일로 이동하는 것입니다. 이 파일은 작은 사이트에서는 작동할 수 있지만 큰 사이트에서는 비현실적입니다.

특히 우리와 같이 많은 모듈이 있는 큰 사이트가 있는 경우 그룹화하고 분리된 상태로 유지하는 것이 합리적입니다.

스타일을 재정의한다는 것이 무슨 말인지 알지만 디자이너가 원하는 계단식 배열을 잠재적으로 망치지 않고 이 정확한 기능을 안전하게 구현할 수 있는지 확신할 수 없습니다.

나에게 이것은 "섹션"(자리 표시자)을 정의한 다음 작성되는 순서에 관계없이 그 안에 배치할 스타일을 정의할 수 있는 것처럼 들립니다. 이것은 "스크립트" 또는 "헤드" 섹션이 있고 페이지가 로드될 때 페이지에 콘텐츠를 삽입할 수 있는 서버 측 템플릿에서 매우 일반적입니다.

따라서 기본적으로 LESS 파일에서 이 작업을 수행할 수 있기를 바랍니다.

<strong i="39">@media</strong> { // retina query
    @renderSection("retina")
}

// in another file
h1 {
    <strong i="40">@section</strong> retina {
        // retina styles
    }
}

@section 는 컴파일 시 현재 선택기로 대체됩니다.

따라서 내 스프라이트 믹스인은 다음과 같이 됩니다.

.sprite(<strong i="46">@spritePath</strong>, <strong i="47">@hdpiPath</strong>, <strong i="48">@x</strong>, <strong i="49">@y</strong>, <strong i="50">@size</strong>: auto) {
    background-image: url(@spritePath);  
    background-repeat: no-repeat;
    background-position: -1 * <strong i="51">@x</strong> -1 * @y; // Negativize the value
    .background-size(@size);
    <strong i="52">@section</strong> retina {
        background-image: url(@hdpiPath);
    }
}

이 구문(또는 구현)일 필요는 없습니다. 저는 ASP.NET Razor 구문을 기반으로 하고 있습니다. 왜냐하면 그것이 내가 익숙하고 구문을 좋아하기 때문입니다.

그 좋은 예 .. 그리고 좋은 사용 사례 .. 당신은 할 수 있습니다

@media-section

(또는 미디어 그룹) 그러면 미디어를 함께 그룹화하지 않아도 됩니다(선택적으로 미디어 쿼리가 이미 존재하는 경우 미디어 쿼리에 병합하여 원하는 위치로 규칙을 가져올 수 있음). 무슨 말이야?

좋은 아이디어라고 생각하고 싶습니다(구현하기가 그리 어렵지도 않음).

@media-group의 경우 +1

+1 @미디어 그룹

다른 옵션은 true/false를 그룹화하기 위한 전역 옵션을 갖는 것입니다.

흠, 이것은 아마도 좋은 생각일 것입니다. 선택적 그룹화가 필요한 경우가 있습니까?

대부분의 경우 사람들은 미디어 쿼리가 더 간결하기를 원하므로 현재로서는 글로벌 옵션이 올바른 방법일 수 있습니다. 선택적인 그룹화가 필요하다고 주장하는 사람이 있으면 나중에 새 키워드를 추가할 수 있습니다.

글로벌 그룹화 옵션의 경우 +1입니다.

예.. @import 에서 여러 키워드를 추가하는 것이 올바른 방법이 아니며 옵션을 추가하는 것이 논쟁의 여지가 덜하다는 것을 보았기 때문입니다.

즉시 유용하고 선택적인 가져오기가 생성된 경우 재정의로 공존할 수 있기 때문에 옵션을 추가한다고 말하고 싶습니다.

안녕하세요, 방금 이 문제를 보고 미디어 쿼리를 그룹화해야 할 때 만든 작은 앱을 공유하고 싶었습니다. 이것은 완성된 앱이 아닙니다. 미래의 도구에 대한 연구와 비슷합니다. 그래서 저는 여러분에게 그 아이디어를 보여주고 싶습니다. 왜냐하면 저는 그것이 반드시 구현되어야 한다고 생각하기 때문입니다. (버그 및 기타 문제가 있을 수 있음) 하지만 트위터 부트스트랩이 포함된 마지막 프로젝트로 테스트했으며 제대로 작동합니다. (규칙 순서에 문제 없음) 알려주세요 ;)

http://mqhelper.nokturnalapp.com

여보세요!

누군가가 할당되었습니까? less로 생성할 때 CSS 파일을 줄이는 데 매우 유용할 수 있는 훌륭한 기능입니다. 그리고 이런 식으로 개발자가 이러한 모든 @mq로 작업하는 것이 더 쉬울 것입니다.

@AoDev mqhelper는 확실히 올바른 방향으로 나아가는 단계입니다. 현재로서는 CSS 린팅 프로세스의 일부로 유용하다고 볼 수 있습니다. 데모의 프론트 엔드 항목에서 추출한 핵심 기능만 있으면 된다고 생각합니다.

예, 하지만 내 앱의 목표는 "실제 도구"의 일부가 아닙니다. 미디어 쿼리를 그룹화하는 것이 문제가 될 수 있는지 궁금해하는 많은 사람들을 보았고 이것이 가능하다는 것을 보여주고 싶었습니다. 코드는 아이디어가 있고 그 일부를 사용하려는 개발자를 위한 것입니다. 하지만 원하는 경우 "실제" 모듈로 만들 수 있습니다. :)

이미 처리했습니다. 깔끔한 작업입니다. 감사합니다.

@Soviut @lukeapage 선택적 그룹화가 가장 합리적이라고 생각합니다. 캐스케이드를 유지하려는 시도를 완전히 또는 전혀 방해하지 않습니다. 확장하거나 문자 그대로 그룹 키워드를 추가하는 것과 유사해야 합니다. 이 구문은 훌륭할 것입니다.

<strong i="8">@tablet</strong>: (max-width: 979px);

.a {
  color: yellow;
  <strong i="9">@media</strong> <strong i="10">@tablet</strong> group {
    color: red;
  }
}
.b {
  background: black;
  <strong i="11">@media</strong> <strong i="12">@tablet</strong> group {
    background: white;
  }
}

//output
.a { color: yellow; }
.b { background: black; }
<strong i="13">@media</strong> (max-width: 979px) {
  .a { color: red; }
  .b { background: white; }
}

안녕하세요, 미디어 쿼리 그룹화는 정말 좋은 추가 기능입니다. 그동안 나는 이 아이디어를 생각해 냈고, 중복된 속성을 피하기 위해 곧 출시될 :extend 기능과 함께 사용할 수 있는지 궁금합니다.

// Define the media queries
<strong i="7">@step1</strong>: ~"only screen and (max-width: 960px)";
<strong i="8">@step2</strong>: ~"only screen and (min-width: 961px)";

// Default empty mixins
.step1() {}
.step2() {}

// Custom styles
.test { color: blue; }

// Change the style in the media queries
.step1() {
  .test { color: red; }
}

.step2() {
  .test { color: green; }
}

// Finally render the media queries
<strong i="9">@media</strong> <strong i="10">@step1</strong> { .step1(); }
<strong i="11">@media</strong> <strong i="12">@step2</strong> { .step2(); }

@AoDev 가 만든 도구는 "전부 아니면 전무" 접근 방식이 실제로 중요하지 않아야 함을 보여주는 데 좋습니다. 미디어 쿼리 그룹화는 스타일 그룹화/재정렬과 같은 부작용을 겪지 않습니다. 모두 또는 전혀 방법에 결함이 있는 방법을 보여주는 실제 예제( @AoDev 에서 만든 도구 에 대해 테스트)를 제공할 수 있습니까?

@kamranayub 은 내가 다루고 있는 정확한 상황을 완벽하게 설명했습니다. 개인적으로, 나는 이 구현의 어떤 형태를 보고 싶습니다. @DesignByOnyx , 아래 테스트 코드는 @AoDev 의 도구로 제대로 컴파일되지 않습니다. 나는 언급한 kamranayub처럼 이런 종류의 스타일링을 하는 것을 선호합니다. 더 큰 사이트에서 여러 개의 적은 파일을 처리할 때 훨씬 더 깨끗합니다.

.footer ul {

  margin: 10px;

  <strong i="9">@media</strong> @layout-tablet, @layout-full {
    font-size: 13px;
    font-weight: bold;
  }
  <strong i="10">@media</strong> @layout-mobile {
    font-size: 10px;
    padding-left: 10px;
  }

  li {

    background: black;
    color: white;
    padding: 10px;

    <strong i="11">@media</strong> @layout-tablet, @layout-full { .border-radius(@radius) }
    <strong i="12">@media</strong> @layout-mobile { .border-radius(@radius-mobile) }   
  }

}

더 적은 구문을 사용했기 때문에 작동하지 않습니다. 일하기 위함이다
CSS로.
2013년 7월 2일 오후 9시 19분에 "P Macom" [email protected]에 다음과 같이 썼습니다.

@kamranayub https://github.com/kamranayub 는 정확한 설명을 완벽하게
내가 처한 상황. 개인적으로 형태가 좀 나왔으면 하는 바램입니다
이 구현의. @DesignByOnyx https://github.com/DesignByOnyx ,
아래 테스트 코드는 @A oDevhttps://github.com/AoDev 로 제대로 컴파일되지 않습니다
도구. 나는 언급한 kamranayub처럼 이런 종류의 스타일링을 하는 것을 선호합니다.
더 큰 사이트에서 여러 개의 적은 파일을 처리할 때 훨씬 더 깨끗합니다.

.바닥글 ul {

여백: 10px;

@media @layout-tablet, @layout-full {
글꼴 크기: 13px;
글꼴 두께: 굵게;
}
@media @layout-mobile {
글꼴 크기: 10px;
패딩 왼쪽: 10px;
}

리 {

background: black;
color: white;
padding: 10px;

<strong i="34">@media</strong> @layout-tablet, @layout-full { .border-radius(@radius) }
<strong i="35">@media</strong> @layout-mobile { .border-radius(@radius-mobile) }

}
}

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/less/less.js/issues/950#issuecomment -20369038에서 확인하세요.
.

LESS가 처리된 후 @AoDev 의 도구에서 사용하는 로직을 실행하자는 제안이 있습니까? 나는 그것이 내 머리 꼭대기에서 원하는 것이 아닐 경우를 생각할 수 없습니다.

LESS가 처리된 후 @AoDev 의 도구에서 사용하는 로직을 실행하자는 제안이 있습니까? 나는 그것이 내 머리 꼭대기에서 원하는 것이 아닐 경우를 생각할 수 없습니다.

임시 옵션이라고 생각합니다. @AoDev 의 솔루션을 grunt.js 모듈에 래핑하여 LESS가 처리된 후 자동으로 실행할 수 있도록 하는 것을 고려할 것입니다(이는 사전 처리가 즉석에서가 아니라 배포 전에 수행됨)

그런트 작업은 중간에 확실히 좋고 원시 CSS에 보편적으로 유용합니다. 하지만 @media magic LESS가 이미 얼마나 많은 일을 하고 있는지 생각하면 그룹화 옵션이 논리적으로 보입니다.

그런 다음 Grunt 태스크는 모바일 스타일시트를 즉석에서 로드하려는 사람들을 위해 미디어 쿼리를 자체 파일로 완전히 분리할 수 있다고 말했습니다.

이제 언급했지만 스타일시트를 분리하는 것은 유용한 옵션입니다. 현재로서는 이를 위해 특별히 소스 파일을 빌드해야 합니다.

미디어 쿼리를 그룹화하고 선택적으로 분할하는 별도의 미디어 쿼리 최적화 도구에 대한 범위가 여기에 있습니까?

전적으로. CSSO가 이미 이 작업을 수행하는지 확실하지 않습니다. 내가 아는 유일한 CSS 재작성자이기도 하므로 이와 관련된 Grunt 작업도 있습니다. 그러나 미디어 쿼리와 같은 것을 별도의 파일로 분할할 수도 없습니다. 마찬가지로 재작성은 DOM 구조와 달리 동일한 선택자와 속성을 기반으로 하는 매우 기본적입니다.

Mqhelper는 이미 개별 미디어 쿼리를 다시 제공합니다. github 확인
자세한 내용은 페이지를 참조하십시오. 거기에서 분리된 css 파일을 빌드할 수 있습니다.
2013년 7월 5일 오전 10시 8분에 "Soviut" [email protected]이 다음과 같이 썼습니다.

전적으로. CSS가 이미 유일한 CSS이기 때문에 이 작업을 수행하는지 확실하지 않습니다.
내가 아는 rewriter에도 이와 관련된 Grunt 작업이 있습니다. 하지만 심지어
미디어 쿼리와 같은 것을 별도의 파일로 분할할 수 없습니다. 비슷하게,
다시 작성하는 것은 동일한 선택자와 속성을 기반으로 하는 매우 기본적입니다.
DOM 구조와 반대입니다.

—
이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/less/less.js/issues/950#issuecomment -20505834에서 확인하세요.
.

그다지 어렵지 않고 덜 장기간에 유용한 것 같습니다.
(그룹화 옵션과 별도의 파일 옵션 모두)
구현하고 싶습니다. 도움을 드릴 수 있습니다...

나는 이것을 구현하기 위해 어떤 유형의 "섹션" 또는 "그룹" 아이디어로 이동하는 것을 방해하고 싶지 않습니다(좋은 생각입니다). 그러나 누군가가 일반 CSS에 대해 정의된 코드에서 @media 속성 정보를 정의하는 기능을 원하지만 코드의 다른 곳에서 단일 @media 쿼리로 그룹화되도록 하는 경우 현재 LESS 기능으로 수행할 수 있는 두 가지 이상의 방법으로 배치를 잘 제어할 수 있지만 제안된 솔루션에 필요한 것보다 약간 더 많은 추가 코딩이 필요합니다(따라서 계속 작업하십시오). 고려하다:

<strong i="8">@media</strong> screen {
  .my-class > .mediaScreen();
  #screenSpace1(screen);
  #screenSpace2(screen);
}

//technique #1 only works for a top level class or id that can act as a namespace
//and would not handle a deep nesting very well
.my-class {
  regular-property: value;

  .mediaScreen(<strong i="9">@selectorString</strong>: ~'.my-class') { //full path needs repeat here if deeply nested
    @{selectorString} {
      media-screen-property: value;
    }
  }
}

//technique #2 allows for tag selectors and easier deeper nesting 
#screenSpace1(<strong i="10">@place</strong>: noMedia) {
  div > ul {
    .setProps() when (<strong i="11">@place</strong> = noMedia) {
       regular-property: value;
    }
    .setProps() when (<strong i="12">@place</strong> = screen) {
       screen-property: value;
    }
    .setProps();

    li {
       .setProps() when (<strong i="13">@place</strong> = noMedia) {
          regular-property: value;
          &:hover { regular-property: value; }
       }
       .setProps() when (<strong i="14">@place</strong> = screen) {
          screen-property: value;
          &:hover { screen-property: value; }
        }
       .setProps();
    }
  }
}
#screenSpace1();

.more-classes-not-needing-media {property: value;}

#screenSpace2(<strong i="15">@place</strong>: noMedia) {
  .someClass {
    .setProps() when (<strong i="16">@place</strong> = noMedia) {
       regular-property: value;
    }
    .setProps() when (<strong i="17">@place</strong> = screen) {
       screen-property: value;
    }
    .setProps();

    > a {
       .setProps() when (<strong i="18">@place</strong> = noMedia) {
          regular-property: value;
          &:hover { regular-property: value; }
       }
       .setProps() when (<strong i="19">@place</strong> = screen) {
          screen-property: value;
          &:hover { screen-property: value; }
        }
       .setProps();
    }
  }
}
#screenSpace2();

이 CSS를 생성합니다.

<strong i="23">@media</strong> screen {
  .my-class {
    media-screen-property: value;
  }
  div > ul {
    screen-property: value;
  }
  div > ul li {
    screen-property: value;
  }
  div > ul li:hover {
    screen-property: value;
  }
  .someClass {
    screen-property: value;
  }
  .someClass > a {
    screen-property: value;
  }
  .someClass > a:hover {
    screen-property: value;
  }
}
.my-class {
  regular-property: value;
}
div > ul {
  regular-property: value;
}
div > ul li {
  regular-property: value;
}
div > ul li:hover {
  regular-property: value;
}
.more-classes-not-needing-media {
  property: value;
}
.someClass {
  regular-property: value;
}
.someClass > a {
  regular-property: value;
}
.someClass > a:hover {
  regular-property: value;
}

나는 다음과 같은 일을 하고 싶었다.

/*
 * Span mixins
 * adapted from Gridpak Beta LESS
 * http://gridpak.com/
 * Created by <strong i="6">@erskinedesign</strong>
 */

.mixin-span(<strong i="7">@num</strong>, <strong i="8">@gutter_pc</strong>, <strong i="9">@padding</strong>, @max_columns) when (<strong i="10">@num</strong> > @max_columns) {
    .mixin-span(<strong i="11">@max_columns</strong>, <strong i="12">@gutter_pc</strong>, <strong i="13">@padding</strong>, @max_columns);
}
.mixin-span(<strong i="14">@num</strong>, <strong i="15">@gutter_pc</strong>, <strong i="16">@padding</strong>, @max_columns) when (<strong i="17">@num</strong> =< @max_columns) {
    <strong i="18">@one_col</strong>: (100% - (<strong i="19">@gutter_pc</strong> * (<strong i="20">@max_columns</strong> - 1))) / @max_columns;
    width:(<strong i="21">@one_col</strong> * @num) + (<strong i="22">@gutter_pc</strong> * (<strong i="23">@num</strong> - 1));
    padding:@padding;
    margin-left:@gutter_pc;
}
.mixin-span_first() {
    margin-left:0;
}

// end of adapted Gridpak LESS

// Namespaced mixin sets

#mob{
    <strong i="24">@max_columns</strong>: 1;
    <strong i="25">@padding</strong>: 0 1.5%;
    <strong i="26">@gutter_pc</strong>: 5%;

    .span(@col){
        <strong i="27">@media</strong> screen and (max-width:300px){
            .mixin-span(<strong i="28">@col</strong>, <strong i="29">@gutter_pc</strong>, <strong i="30">@padding</strong>, @max_columns);
            .mixin-span_first;
        }
    }
}

#desk{
    <strong i="31">@max_columns</strong>: 10;
    <strong i="32">@padding</strong>: 0 3%;
    <strong i="33">@gutter_pc</strong>: 5%;

    .span(@col){
        <strong i="34">@media</strong> screen and (min-width:301px){
            .mixin-span(<strong i="35">@col</strong>, <strong i="36">@gutter_pc</strong>, <strong i="37">@padding</strong>, @max_columns);
        }
    }
}

//assign different layouts per namespaced breakpoint
/* ----- Header ----- */
#header{
    #mob > .span(2);
    #desk > .span(4);
    .mixin-span_first;
    background-color:#888;
    color:#fff;
}

/* ----- Main ----- */
#main{
    #mob > .span(1);
    #desk > .span(6);
    background-color:#eee;
    color:#111;
}

그러나 그룹화하지 않으면 생성된 CSS가 약간 부피가 커집니다.

/* ----- Header ----- */
#header {
  margin-left: 0;
  background-color: #888;
  color: #fff;
}
<strong i="41">@media</strong> screen and (max-width: 300px) {
  #header {
    width: 100%;
    padding: 0 1.5%;
    margin-left: 5%;
    margin-left: 0;
  }
}
<strong i="42">@media</strong> screen and (min-width: 301px) {
  #header {
    width: 37%;
    padding: 0 3%;
    margin-left: 5%;
  }
}
/* ----- Main ----- */
#main {
  background-color: #eee;
  color: #111;
}
<strong i="43">@media</strong> screen and (max-width: 300px) {
  #main {
    width: 100%;
    padding: 0 1.5%;
    margin-left: 5%;
    margin-left: 0;
  }
}
<strong i="44">@media</strong> screen and (min-width: 301px) {
  #main {
    width: 58%;
    padding: 0 3%;
    margin-left: 5%;
  }
}

이 https://github.com/buildingblocks/grunt-combine-media-queries에 대한 솔루션이 있지만 현재로서는 최소 너비로만 주문하므로 주로 모바일 우선 사이트에 유용합니다.

IMO 문제 #930에 대한 솔루션을 제공할 범위 그룹화 제어로 문제를 일반화하는 것이 합리적입니다.

https://github.com/Se7enSky/group-css-media-queries

훌륭한 도구 @krava ! 감사 해요

최고!!! IMO는 LESS에서 KRAVA의 기능을 구현하는 것이 합리적입니다.

+1

플러그인으로 하고 싶습니다. 너무 힘들지 않아야합니다. 그래도 너무 많이!

플러그인은 시스템이 플러그인(options.json)을 자동 로드하는 것보다 우선순위가 낮아야 한다고 생각합니다. 그러나 예, 플러그인은 추가 기능으로 의미가 있습니다.

이 옵션이 아직 구현되지 않았습니까?
이렇게 하면 구성 요소 내에서 미디어 쿼리를 사용하고 출력 단계에서 그룹화할 수 있으므로 출력된 CSS가 절반으로 줄어들 것입니다.

선택자 재정렬과 관련하여 "그룹" 키워드를 사용하여 항목을 그룹화하면 현재 논리 흐름에서 제거되고 그룹화된 영역에 배치된다는 것을 알고 있습니다.

http://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/
이 기사에 따르면 미디어 쿼리를 그룹화할 필요는 없습니다.
하지만 플러그인은 좋습니다.

결과 CSS 파일의 크기이기 때문에 성능 문제가 아닙니다. 수십 개의 <strong i="5">@media</strong> screen and (max-width: 480px) 문자열이 CSS 파일 크기 측면에서 추가되기 시작합니다.

나는 SO에서 이 질문을 했고 누군가가 이 문제에 대해 부분적으로 대답했습니다.

@seven-phases-max가 답변을 제공했으며 그의 답변에서 이 문제를 다시 언급했습니다. 매우 메타 ;)

나는 미디어 쿼리를 사후 처리하는 것과는 대조적으로 미디어 쿼리를 병합하는 방법을 확실히 선호합니다. 이렇게 하면 병합되는 항목과 방법을 더 쉽게 입력하고 제어할 수 있습니다.

여기 주석에서 내 모든 프로젝트에서 사용하는 솔루션을 볼 수 있습니다.
https://github.com/less/less.js/issues/950#issuecomment -17723748

방금 검색을 수행하여 미디어 쿼리 그룹화를 수행하는 두 개의 그런트 플러그인을 찾았습니다.

https://github.com/buildingblocks/grunt-combine-media-queries

https://github.com/Se7enSky/grunt-group-css-media-queries

미디어 쿼리를 결합도 사용할 수 있습니다 꿀꺽 .
http://github.com/konitter/gulp-combine-media-queries

v2부터 플러그인을 사용할 수 있으므로 https://github.com/bassjobsen/less-plugin-group-css-media-queries (및 https://github.com/bassjobsen/less-plugin-pleeease)를 참조

플러그인에서 지원하고 코어로 이동하는 우선 순위가 아니기 때문에 닫기(AFAIK - @less/admin이 잘못된 경우 수정).

@gyopiazza https://github.com/less/less.js/issues/950#issuecomment -17723748 위의 질문이 있습니다: 왜 믹스인을 초기화해야 하나요? 내 말은, CSS는 init 없이 컴파일됩니다. 모범 사례와 사용법을 이해하려고 노력하는 것 같습니다.

@nfq 이것은 초기화가 아니라 "기본" 빈 정의일 뿐입니다. 사용자 정의 .step*() 믹스인을 제공하지 않는 경우에 필요합니다(예: "default" .step*() 정의 및 해당 렌더링이 일부 일반 유틸리티/라이브러리 코드, 사용자 정의 .step*() 정의는 테마/프로젝트 특정 코드에 있음).

@nfq 실제로는 필요하지 않습니다.
@seven-phases-max가 언급했듯이 미디어 쿼리가 존재하지 않는 믹스인을 호출하기 때문에 코드에서 믹스인을 사용하지 않는 경우 오류를 피하는 것이 좋습니다.

Btw, 이 기술의 장점은 미디어 쿼리를 결합하면 컴파일 시간(약간)이 느려진다는 것입니다.

@gyopiazza 빠른 답변 감사합니다. 나는 컴파일 시간에 신경 쓰지 않으며, 대규모 프로젝트의 경우 모든 미디어 쿼리를 기본 스타일시트의 맨 아래에 그룹화하는 것을 선호합니다. 몇 가지 플러그인을 시도했지만 우리의 사용 사례에 가장 쉽고 가장 편리한 방법을 찾았습니다. 감사 해요!!

@seven-phases-max 감사합니다. 귀하의 답변이 의미가 있습니다. 나는 덜 많이 사용하지만, 특정 일을 달성하는 가장 좋은 방법을 아직 이해하지 못했습니다!

clean-css도 v3부터 @media 병합을 지원하고 less-plugin-clean-css도 지원합니다.

main.less 사용:

header {
    color: green;

    <strong i="9">@media</strong> only screen (max-width: 500px) { color: red; }
}

footer {
    color: green;

    <strong i="10">@media</strong> only screen (max-width: 500px) { color: red; }
}

lessc --clean-css="advanced" main.less 출력:
footer,header{color:green}<strong i="15">@media</strong> only screen (max-width:500px){footer,header{color:red}}

less-plugin-clean-css는 기본적으로 --skip-advanced를 true로 설정합니다. @media 병합을 위해 advanced 옵션을 명시적으로 설정해야 합니다.

@nfq "mixin 방식"을 사용하면 미디어 쿼리가 여전히 맨 아래(또는 선언한 모든 위치)에서 컴파일됩니다.

@gyopiazza 감사합니다. 이 접근 방식에 만족합니다!!

@bassjobsen 더 큰 프로젝트에서 이것을 확실히 사용할 것입니다. 나는 아직 Less 플러그인을 사용하기 시작하지 않았습니다. 팁 감사합니다!