@mixin bx($position, $wid, $color) {
border-#{$position}: $wid solid $color;
}
div {@include bx(right, 2px, red)}
p {@include bx(bottom, 5px, grey)}
@charset 'utf-8';
/*
.list li.ico1 {background: url('icon1.png') no-repeat;}
.list li.ico2 {background: url('icon2.png') no-repeat;}
.list li.ico3 {background: url('icon3.png') no-repeat;}
.list li.ico4 {background: url('icon4.png') no-repeat;}
*/
.list li {text-indent:30px; background: no-repeat 0 0 / 20px auto;}
@for $i from 1 to 5 {
// for (let i=1; i<5; i++)
.list li.ico#{$i} {background: url('/img/icon#{$i}.png')}
.list li:nth-child(#{$i}):before { content: '제목#{$i} ';}
}
// @each 지시자 변수 in(변수 순차적 배치)
@each $var in book, zoom, phone {
.ico_#{$var}{
background: url(/img/#{$var}.png) no-repeat;
background-size: contain;
}
}
$heading :(
h1:30px,
h2:20px,
h3:15px
)
@each $ele, $fs in $heading {
#{$ele} {
font-size: $fs;
}
}
@each $ele, $fs in $heading 에러 이유가 뭘까
// 1
@mixin btn_radius($h, $radius:true) {
padding: 0 20px;
height: $h;
line-height: $h;
text-align: center;
background-color: skyblue;
@if $radius {
border-radius: $h / 2;
} @else {
border: 3px solid lightgreen
}
}
.btn {@include btn_radius(30px, false);}
// 2
@mixin position($x, $y, $z) {
position: absolute;
top: $y;
left: $x;
z-index: $z;
@if $x == 50% and $y == 50% {
transform: translate(-50%, -50%);
}@else if $x == 50% {
transform: translateX(-50%);
}@else if $y == 50% {
transform: translateY(-50%);
}
}
div {
width: 300px;
height: 300px;
background-color: #000;
@include position(50%, 50%, 2);
}
@charset "UTF-8";
.a {
border: 1px solid lawngreen;
background-color: skyblue;
}
.a::after {
content: "";
display: block;
clear: both;
}
.a > div {
float: left;
}
.b {
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
}
.c {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
width: 250px;
height: 66px;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
webkit- : 크로싱 브라우저를 위하여 (구글, 사파리 브라우저에 적용)
모바일 웹으로 앱과 비슷한 형식의 모바일 앱웹을 만들 경우, css를 이용할때 사용하는 옵션
-webkit- : 구글의 크롬, 애플의 사파리 웹브라우저에 적용함.
-moz- : 웹브라우저 모질라(FireFox, 파이어폭스)에 적용함.
-ms- : MS(마이크로소프트)사의 인터넷익스플로러에 적용함.
-o- : 웹 브라우저 오페라에 적용함.
-webkit-line-clamp : 몇줄뒤에 콘텐츠를 자를지 (IE지원 X)
-webkit-box-orient : 박스의 흐름 방향을 지정 (IE지원 X)
-webkit-box로 설정해야하고 box-orient가 vertical값이 되야만 line-clamp가 실행
@mixin position($x, $y, $z, $width) { position: absolute; left: $x; top: $y; z-index: $z; width: $width;
@if $x == 50% and $y == 50% {
transform: translate(-50%, -50%);
} @else if $x == 50% {
transform: translateX(-50%);
}
@else if $y == 50% {
transform: translateY(-50%);
}
}
div {
@include position(50%, 50%, 2, 500px);
height: 200px;
border: 3px solid lawngreen;
}