Scss mixins는 스타일 시트에서 보통 재사용할 걸 모아놓은 그룹이라 생각하면 된다.
즉 component 요소를 사용하기 적합한 방법이다.
흠 개인적으로 이러한 Mixin은 필요한 상황 때 마다 만드는 법인데 인터넷 서치로도 많이 나와 있으니 다들 검색해서 알아보는 게 좋다.(인터넷 서칭이 보물창고다.)
참고로 mixin은 @include (mixin 명)로 불러온다.
-->> 기초적인 거니 외우자
@mixin W_division($w:null,$i, $space:null) {
width: $w , $space;
@for $i from 1 through 12{
.w_division#{$i}{
width:calc((#{$w} / #{$i}) - #{$space});
}
}
}
뭐든 코드나 닉네임은 직관적인 닉네임이 좋다.
mixin 을 불러와서 넓이와 분배할 등분을 불러오고 좌우간격을 입력하여 간격을 조정할 수 있는 mixin이다. 참고로 이거는 display:flex나 grid 사용시 편리하다.
@mixin font($s, $w:null, $f:null) {
font: {
family: $f;
size: $s;
weight: $w;
}
}
font의 크기나 font-weight 그리고 폰트 패밀리를 지정하는 믹스인 _description.scss 파일 같은걸 만들시 편리하다.
@mixin after($w, $h) {
position: relative;
&::after {
display: block;
position: absolute;
content: '';
width: $w;
height: $h;
@content;
}
}
@mixin before($w, $h) {
position: relative;
&::before {
display: block;
position: absolute;
content: '';
width: $w;
height: $h;
@content;
}
}
부모요소의 position relative를 할당하고 거기에 가상선택자를 활용하여 디자인 할 수 있게 도와준다. @content를 활용하여 세부적인 내역도 작업가능 할 수 있게 해두었다. 이부분은 후임분이 잘 만드셔서 후임분걸 대체로 사용하는 중이다.
@mixin background($imgpath,$position:center top,$repeat: no-repeat, $size:cover) {
background: {
image: url($imgpath);
position: $position;
repeat: $repeat;
size:$size;
}
}
// background numbering
@for $i from 1 through 3{
.main_img_slider0#{$i}{
.bg{
@include background('/img/main/m_visaul_bg0#{$i}.jpg');
}
}
}
.jisa_bg{
@for $i from 1 through 12{
&:nth-of-type(#{$i}){
background:url(/img/main/bg_jisa_#{$i}.jpg) no-repeat left center / 100%;
}
}
}
첫 번째는 배경 요소를 선언하여 이미지 패스 등을 활용하여 배경 이미지를 넣는 방식이고 두 번째는 for문을 활용하여 이미지에 넘버링을 활용한 배경 이미지 삽입 세번째도 마찬가지다.
참고로 이거 통일할 수 있는데 귀찮아서 안하는 중이다 반성하자
@mixin layout{
width: 100%;
position: relative;
margin: 0 auto;
}
기본적인 layout 선언이다. 이거는 설명하고 뭐 할것도 없다.
// fadein
.fadein {
opacity: 0;
transition: all 1s;
transition: transform .5s, opacity .5s;
transform: translateY(100px);
@for $i from 1 through 9 {
&_d#{$i} {
transition-delay: .2s*$i;
@extend .fadein;
}
}
}
fadeIn을 활용하는 방법이다. 1~9까지로 나누어 딜레이를 주고 @extend를 활용하여 부모요소의 효과를 받게 하였다.
// Break Point
$mobileVersion1:320px;
$mobileVersion2:376px;
$mobileVersion3:768px;
// Mixins
@mixin mobileVersion1 {
@media (min-width: #{$mobileVersion1}) and (max-width: #{$mobileVersion2 - 1px}) {
@content;
}
}
@mixin mobileVersion2 {
@media (min-width: #{$mobileVersion2}) and (max-width: #{$mobileVersion3 - 1px}) {
@content;
}
}
@mixin mobileVersion3 {
@media (min-width: #{$mobileVersion3}) {
@content;
}
}
해당 파일은 반응형 작업을 진행시에 만든 파일이다.
원래는 적응형이였던 페이지를 작업 하다가 하나하나 선언하는게 귀찮다 생각해서 mixin을 만들자고 생각해서 제작했다. 제일 mini me한 320 size middle 사이즈인 376~767 이고 tablet 부터는 768 이상부터로 작업 했다.
$browser-context:10;
@function rem($px, $context: $browser-context) {
@return #{$px/$context}rem;
}
rem을 반응형으로 사용하다 보면 html font-size를 변경해야 하는데 mobile 에서는 html font-size를 50%로 하다 보니 1rem 당 8px이 되게되서 작업하기 너무 귀찮았다. 그렇기엔 해당 px을 입력하면 html font-size에 대한 걸 가져와서 나누는 방식을 사용하게 했다. mobile에서 font-size 50% 면 browser-context: 8; 로 해주면 된다.