position
@mixin position($position, $args: null) {
position: $position;
@if $args != null {
$top-value: get-match-value-of-keys($args, top t);
$right-value: get-match-value-of-keys($args, right r);
$bottom-value: get-match-value-of-keys($args, bottom b);
$left-value: get-match-value-of-keys($args, left l);
z-index: get-match-value-of-keys($args, z-index z);
top: if($top-value, unitless-px($top-value), null);
right: if($right-value, unitless-px($right-value), null);
bottom: if($bottom-value, unitless-px($bottom-value), null);
left: if($left-value, unitless-px($left-value), null);
}
}
.usage {
@include position(absolute, t 0 r 0 b 0 l 0 z 1000);
}
---------------Compiled------------------
.usage {
position: absolute;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@mixin position-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@mixin position-vt{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@mixin position-hr{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
말줄임 설정
@mixin ellipse($line:1){
overflow: hidden;
text-overflow: ellipsis;
@if($line > 1){
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}
@else{
white-space: nowrap;
}
}
**
@include ellipse(n);
반응형
$mobile: 767px;
$tablet: 1024px;
$desktop: 1100px;
@mixin mobile{
@media (max-width: $mobile){
@content;
}
}
@mixin tablet{
@media (max-width: $tablet){
@content;
}
}
@mixin desktop{
@media (max-width: $desktop){
@content;
}
}
border-radius
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);}