LESS에서 미디어 쿼리를보다 효율적으로 사용하려면 어떻게해야합니까?

Question

나는 반응 속도가 빠른 웹 페이지 디자인에서 부트 스트랩과 덜 작업하고 있습니다.

과거 내가 덜한 이유 중 하나는 HTML 요소의 모든 특성을 함께 유지할 수 있기 때문입니다. 뷰포트 인 경우

은 내가 아래에있는 것은 그 블록 내부 요소에 적용 일부 .sponsors 블록을 정의하는 규칙, 그리고 하나의 규칙입니다> = 768px

그 하나의 규칙이 필요로 어떻게 좋아하지 않아 여분의 많은 코드, 그리고 그 규칙이 나머지 규칙들과 어떻게 다른지에 대한 정보를 제공합니다. 또한 잘못 생각합니다.

이 작업을 수행하는 더 좋은 방법은 무엇입니까? 모든 것을 최상위 레벨 @media 그룹으로 분류하여 시작해야합니까? 같은이 있다면

.sponsors 
{ 
    li 
    { 
     .thumbnail 
     { 
      padding-top:20px; 
      padding-bottom:15px; 
      img 
      { 
       display:block; 
       margin:0 auto; 
      } 
     } 
    } 
} 


@media (min-width: 768px) 
{ 

    .sponsors 
    { 
     li 
     { 
      .thumbnail 
      { 
       padding-bottom:0px!important; 
      } 
     } 
    } 
} 

꽤 달콤한 것 :

.thumbnail 
{ 
    &[@mediaWidth >=768] 
    { 
    padding-bottom:0px!important; 
    } 
} 

Answer 1

내가 생각 할 수 있습니다 것 '거품'그 루트에 둥지 미디어 쿼리 및 LESS (> 1.3.0) 귀하 컴파일하는 동안 스타일 시트.

.sponsors 
{ 
    li 
    { 
     .thumbnail 
     { 
      padding-top:20px; 
      padding-bottom:15px; 

      @media (min-width: 768px) { 
       padding-bottom:0px!important; 
      } 

      img 
      { 
       display:block; 
       margin:0 auto; 
      } 
     } 
    } 
}