"Sass @media 쿼리 단축"의 두 판 사이의 차이

(새 문서: ==개요== ;Sass @media 쿼리 단축 <source lang='css'> $mobile: "(max-width: 500px)"; p { font-size: 16px; } @media #{$mobile} { p { font-size: 18px; } } </source> ==...)
 
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
3번째 줄: 3번째 줄:


<source lang='css'>
<source lang='css'>
$mobile: "(max-width: 500px)";
$mobile: "(max-width:500px)";


p {
  font-size: 16px;
}
@media #{$mobile} {
@media #{$mobile} {
   p {
   width: 100%;
    font-size: 18px;
  }
}
}
</source>
</source>
20번째 줄: 15번째 줄:
* [[미디어 쿼리]]
* [[미디어 쿼리]]
* [[함수 is_mobile()]]
* [[함수 is_mobile()]]
==참고==
* https://davidwalsh.name/write-media-queries-sass


[[분류: Sass]]
[[분류: Sass]]

2017년 7월 26일 (수) 21:52 기준 최신판

1 개요[ | ]

Sass @media 쿼리 단축
$mobile: "(max-width:500px)";

@media #{$mobile} {
  width: 100%;
}

2 같이 보기[ | ]

3 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}