SCSS _variables.css 변수선언 후 @import 가져다 쓰기

_variables.css

//colors
$color-red: #bf002d;
$color-pink: #f1859e;
$color-neonpink: #f53c68;
$color-yellow: #f89407;
$color-purple: #9643b1;
$color-black: #222222;
$color-white: #fff;
$color-gray: #666;
$color-lightgray: #ddd;
$color-darkgray: #909090;
$color-peachpink: #f7dfcb;
//border

//font-size
$fs-smaller: 1.3rem;
$fs-small: 1.4rem;
$fs-default: 1.5rem;
$fs-big: 1.8rem;
$fs-bigger: 2rem;
$fs-huge: 2.4rem;
$fs-giant: 3.2rem;

//size
$size-1r: 1rem;
$size-2r: 2rem;
$size-12r: 12rem;
$size-14r: 14rem;
$wrapper-top : $size-12r;

//Breakpoints
$breakpoint-desktop-large: 1370px;
$breakpoint-desktop-small: 1024px;
$breakpoint-tablet: 768px;
$breakpoint-mobile: 414px;

//responsive
@mixin desktop-large {
    @media (max-width: $breakpoint-desktop-large) {
        @content;
    }
}
@mixin desktop-small {
    @media (max-width: $breakpoint-desktop-small) {
        @content;
    }
}
@mixin tablet {
    @media (max-width: $breakpoint-tablet) {
        @content;
    }
}
@mixin mobile {
    @media (max-width: $breakpoint-mobile) {
        @content;
    }
}

*variables.scss가 길어지면 responsive.css 를 따로 만드는 것도 좋을 듯..!

---

custom.css

변수 사용을 위한 @import "./variables";

문서는 위에서부터 읽히므로 최상단에 선언해야함.

@import "./variables";

//START default btn
.btn_wrap{ width:100%; padding: 3rem 0; text-align: center;}
.btn_item{ min-width: 8rem; padding: $size-2r; color: $color-white; background-color: $color-black; border: 1px solid $color-lightgray; font-size: $fs-default; transition: .3s;
    &:hover {color: $color-black; background-color: $color-white;}
    &.round{ border-radius: $size-1r;}
}
.btn_item_s{ min-width: 6rem; padding: .5rem $size-1r; color: $color-white; background-color: $color-black; border: 1px solid $color-lightgray; font-size: $fs-small; transition: .3s;
    &:hover {color: $color-black; background-color: $color-white;}
    &.round{ border-radius: .5rem;}
}
.btn_white{ color: $color-black; background-color: $color-white; border: 1px solid $color-lightgray;
    &:hover {color: $color-white; background-color: $color-darkgray;}
}
.btn_pink{ color: $color-white; background-color: $color-pink; border: 1px solid $color-lightgray;
    &:hover {color: $color-white; background-color: $color-darkgray;}
}
.btn_cancel{ color: $color-white; background-color: $color-red; border: 1px solid $color-lightgray;
    &:hover {color: $color-white; background-color: $color-black;}
}
.btn_success{ color: $color-white; background-color: $color-yellow; border: 1px solid $color-lightgray;
    &:hover {color: $color-white; background-color: $color-black;}
}
.btn_approval{ color: $color-white; background-color: $color-purple; border: 1px solid $color-lightgray;
    &:hover {color: $color-white; background-color: $color-black;}
}
//EMD default btn