미디어 쿼리에 대한 의견

Question

Google 팀에서 언젠가는 css 전처리로 마이그레이션 할 예정입니다. 그때까지 표준적인 주석을 의사 변수로 사용하는 일관성있는 방법에 의존하는 절반 단계를지지합니다. 그래서 스타일 시트의 상단에, 우리는 같은 것을 정의 할 수 있습니다 : 스타일을 사용하는 경우 다음

/*  #333333; /* $primary-site-color */ 
/*  #333333; /* $button-color */ 

을, 우리는 다음과 같이 위의를 사용하십시오 :

h1 { color: #333333; /* $primary-site-color */ } 
input { background-color: #333333; /* $button-color */ } 

을 모두 H1 입력 요소가 현재 확인 동일한 16 진수 색상을 사용하지만 "# 333333"의 찾기/바꾸기를 통해 기본 사이트 색상을 전체적으로 교체하려면 해당 색상의 모든 인스턴스에 영향을 미칩니다. 그러나 주석을 포함하는 찾기/바꾸기를 수행하면 특정 "의사 변수"의 인스턴스 만 대상으로 지정할 수 있습니다.

지금 내 질문 :이 유효 (널리 지원)에서 미디어 쿼리와 같은 의견 위치 :

이 제한된 테스트에서

@media only screen and (max-width: 767px /* $first-breakpoint */) { ... } 

가 잘 작동하는 것 같다,하지만의 의견에 결정적인 아무것도 찾을 수 없습니다 미디어 쿼리.

미리 감사드립니다.

Answer 1

미디어 쿼리는 구문 측면에서 특별한 의미가 없습니다. 오랫동안 CSS @ 문장이있었습니다. 즉, @import, @font-face 등입니다. 주석은 주석이며, 적절한 이스케이프 문자열로 둘러싸인 것은 브라우저에서 무시됩니다.

귀하의 계획은 견고한 것으로 보이며, 상당히 단기적인 해결책이라고 가정 할 때 미래의 코드 가독성에 대해별로 걱정하지 않을 것입니다. 간단하게 찾기/바꾸기 작업을 수행하여 코드를 새로운 전처리 기의 요구 사항으로 마이그레이션 할 수 있도록 설정하는 데 중점을 둡니다.