SCSS Tip

1. border-radius 믹스인 만들기

참고 : https://stackoverflow.com/questions/23745320/border-radius-sass-mixin

/* 선언 */
@mixin border-radius($pixel1, $pixel2, $pixel3, $pixel4) {
    border-top-left-radius: $pixel1;
    border-top-right-radius: $pixel2;
    border-bottom-right-radius: $pixel3;
    border-bottom-left-radius: $pixel4;
}

/* 사용 */
@include border-radius(#{vw(16px)}, #{vw(16px)}, 0, 0);

2. flex 믹스인

: https://gist.github.com/richardtorres314/26b18e12958ba418bb37993fdcbfc1bd

3. 변수 선언하기

$zIndex : 100;

$변수명 : 값

4. 반복문 Each를 활용한 이미지 백그라운드 설정

• SCSS 반복문을 사용해서 간결해진 소스

// 반복문으로 사용할 변수들 : fruits, vegetables, meats, shirimp
@each $category in fruits, vegetables, meats, shirimp {
    &.#{$category} {
        background-image: url('#{$imageUrl}main/Icon-40-#{$category}_line_40.svg');

        &.active {
            background-image: url('#{$imageUrl}main/Icon-40-#{$category}_line_40_on.svg');
        }
    }
}

1. each라는 키워드로 사용
2. 반복문안에서 변수를 사용할 때는 #{}안에 사용
3. 클래스 명, 이미지 명을 통일 시키면 이렇게 효과적으로 사용 가능!
4. 반복문을 활용해서 소스의 길이를 줄일 수 있다.

• CSS를 이용해서 모든 케이스를 다 적은 소스

// 과일
&.fruits {
    background-image: url('#{$imageUrl}main/Icon-40-fruits_line_40.svg');

    &.active {
        background-image: url('#{$imageUrl}main/Icon-40-fruits_line_40.svg');
    }
}

&.vegetables {
    background-image: url('#{$imageUrl}main/Icon-40-vegetables_line_40.svg');

    &.active {
        background-image: url('#{$imageUrl}main/Icon-40-vegetables_line_40.svg');
    }
}