by 이듬(E.UID)

media()

include-media 라이브러리 믹스인

용도

반응형 웹 디자인에 사용되는 미디어 쿼리를 손쉽게 사용하고자 할 때 유용합니다.

사용법

전달 받은 미디어 쿼리를 분석해 CSS @media 문 코드로 변경 출력합니다.

media($queries...)

.usage {
  color: get-color(gray);
  
  @include media('>=xl', '2x') {
    color: get-color(black);
  }
}

media() 믹스인에 전달 가능한 중단점, 미디어 표현식은 환경 구성 변수를 통해 설정합니다.

위 예시 코드는 아래와 같이 CSS 코드로 출력됩니다.

.usage {
  color: #787878;
}

@media (min-width: 80em) and (-webkit-min-device-pixel-ratio: 2), (min-width: 80em) and (min-resolution: 192dpi), (min-width: 80em) and (min-resolution: 2dppx) {
  .usage {
    color: #010101;
  }
}

문서

자세한 사용법은 include-media 라이브러리 문서를 참고하세요.

참고

media() 믹스인은 include-media 라이브러리를 활용합니다.

Previous반응형 웹 (Rsponsive Web)Nextrwd-img()

Last updated