스페이스 루미

컴포넌트에 width값을 받아 min, max width를 지정해주는 컴포넌트를 만들수도 있다. 굳이 컴포넌트까지 만들지 않으려면 mixin을사용하여 클래스를 만들어주자. @mixin minmax-classes { @for $i from 50 through $minmax-width { $value: $i * 1px; .minmax#{$i} { min-width: $value; max-width: $value; width: $value; } } } @include minmax-classes; width, min-width, max-width 값이 200으로 들어간다. 생각보다 많이 사용하게되므로 만들어두면좋다. 사용 인덱스 영역

ellipsis 말줄임 처리는, 자주 사용하는 믹스인이라 미리 만들어두면좋다. @mixin ellipsis($line: 1) { @if ($line == 1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; // 공백 없을때 글자 짤림 방지 -webkit-box-orient: vertical; -webkit-line-clamp: $line; } } 기본값은 1로 두고, 변수를 입력해주면 line-clamp에 들어간다. * 컨테이너의 width값이 정해져있어야한다...

스크롤 믹스인을 만들어두자 스크롤 안보이게 처리하기 @mixin scroll-hidden { scrollbar-width: none; /* Firefox */ &::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } } 스크롤 커스터마이징 하기 @mixin scroll($size, $scroll-color, $bg-color) { overflow:auto; &::-webkit-scrollbar { width: $size; height: $size; } &::-webkit-scrollbar-thumb { background: $scroll-color; } &::-webkit-scrollbar-track { background: $bg-color..

폰트 관련 믹스인도 만들어두면 유용하게 쓸 수 있다. 한글폰트, 영문폰트를 각각 설정하는것은 다른파트에서 기록. @mixin /* 10부터 i 까지 폰트 사이즈 만들기 */ /* i값은 0.1, 0.2, 0.3 rem씩 증가 */ /* 기본 html font-size를 10으로 고정 */ html { font-size: 10px; } @mixin font-classes { @for $i from 10 through $max-font { $value: $i * 0.1rem !important; .font#{$i} { font-size: $value; } } } @include font-classes; /* 타입을 받아서 폰트 세팅을 결정 */ @mixin font($type: "title") { @if (..

믹스인으로 마진 패딩 클래시스를 만들어두면 유용하게 쓸수있다. @mixin $max: 180; // 생성할 최대값 지정 @mixin margin-classes { @for $i from 0 through $max { // 0부터 i까지 증가. max인 180까지 생성 $margin: $i * 1px !important; .ma#{$i} { margin: $margin; } .ml#{$i} { margin-left: $margin; } .mr#{$i} { margin-right: $margin; } .mt#{$i} { margin-top: $margin; } .mb#{$i} { margin-bottom: $margin; } .mx#{$i} { margin-left: $margin; margin-right:..