Created
October 30, 2015 09:14
-
-
Save arkist/47864794095b755f8768 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.14) | |
// Compass (v1.0.3) | |
// Susy (v2.2.5) | |
// ---- | |
@import "susy"; | |
/** | |
* placeholder w/media query 예제 | |
**/ | |
%text-wrap { | |
display: inline-block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
// 미디어 쿼리내에 다양한 컴포넌트(eg. `.text-box`)를 넣는 대신 | |
// 컴포넌트 내에 미디어쿼리를 위치시킨다 | |
// 이렇게 함으로서 해당 컴포넌트가 미디어쿼리에 따라 어떻게 변하는지 | |
// 한눈에 확인이 가능하다. | |
// 기존방식은 셀렉터가 중복되고, 이 방식은 미디어쿼리가 중복된다. | |
.text-box { | |
width: 500px; | |
height: 30px; | |
font-size: 12px; | |
color: #333; | |
@extend %text-wrap; | |
@include susy-breakpoint(1000px) { | |
color: black; | |
} | |
} | |
@include susy-breakpoint(1000px) { | |
// 같은 컨텍스트 내에선 placeholder-selector 접근이 가능하다. | |
%placeholder-in-media-query { | |
color: red; | |
} | |
.test1 { | |
@extend %placeholder-in-media-query; | |
} | |
.test2 { | |
@extend %placeholder-in-media-query; | |
} | |
} | |
/** | |
* mixin 예제 | |
**/ | |
@mixin text-wrap { | |
display: inline-block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.text-box { | |
width: 500px; | |
height: 30px; | |
font-size: 12px; | |
color: #333; | |
@include text-wrap; | |
} | |
@include susy-breakpoint(1000px) { | |
.text-box { | |
width: 500px; | |
height: 30px; | |
font-size: 12px; | |
color: #999; | |
@include text-wrap; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
/** | |
* placeholder w/media query 예제 | |
**/ | |
.text-box { | |
display: inline-block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.text-box { | |
width: 500px; | |
height: 30px; | |
font-size: 12px; | |
color: #333; | |
} | |
@media (min-width: 1000px) { | |
.text-box { | |
color: black; | |
} | |
} | |
@media (min-width: 1000px) { | |
.test1, .test2 { | |
color: red; | |
} | |
} | |
/** | |
* mixin 예제 | |
**/ | |
.text-box { | |
width: 500px; | |
height: 30px; | |
font-size: 12px; | |
color: #333; | |
display: inline-block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
@media (min-width: 1000px) { | |
.text-box { | |
width: 500px; | |
height: 30px; | |
font-size: 12px; | |
color: #999; | |
display: inline-block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment