css를 쓰기 쉽게 해주는 도구 (수정, 관리에 용이)
scss식 코드를 css화하는 컴파일 작업 필요
- 앞에 언더바( _ )가 붙은 scss파일을 'style.scss'(허브역할)에 임포트(@import) 함
@import './utils/var'; (변수) @import './utils/mixins'; (재사용 가능) @import './base/common'; (공통) @import './base/reset'; (초기화) @import './base/typo'; (폰트) @import './layout/footer'; @import './layout/header'; @import './layout/nav'; @import './pages/main';
@mixin position-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@mixin position-hr{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@mixin position-vt{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@mixin ellipse($line:1){
overflow: hidden;
text-overflow: ellipsis;
@if($line==1){
white-space: nowrap;
}
@else{
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}
}
/*반응형 화면 크기*/
$mobile: 767px; //320
$tablet: 1023px; // 768
$desktop: 1200px; //1025
/*반응형, 브라우저 크기가 767px 이하일때*/
@mixin mobile{
@media (max-width: $mobile){
@content;
}
}
/*반응형, 브라우저 크기가 768이상, 1024px 이하일때*/
@mixin tablet{
@media (max-width: $tablet){
@content;
}
}
/*반응형, 브라우저 크기가 1025px 이상일때*/
@mixin desktop{
@media (max-width: $desktop){
@content;
}
}