SASS기능 USE

SASS의 다른기능 USE?

USE란 다른 SASS파일에 있는 CSS속성들을 가져올때 사용한다.
만약 서로 다른 CSS파일에서 태그와 CSS속성이 겹칠때
개발자가 반복해서 속성을 적는걸 막아준다.
즉,

$color : red;
body{
    font-size: 18px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
}

이 코드가 적혀있는 test.scss파일이 있다.

그리고 다른 SCSS파일에 똑같이 적용하고 싶을때

@use "test";

이 코드를 적용하고 CSS파일로 변환하면 똑같이 나온다.

$color: red;
body{
    font-size: 18px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
}

만약 내가 test.scss파일에 있는 변수도 사용하고 싶다면
해당 변수 앞에 파일의 이름을 적으면 된다.

.box{
    color: test.$color;
}

그러나

해당 변수에 있는 파일 이름이 너무 길거나 할때 사용할수있는 방법이 있다.

@use "test" as c;

위 코드를 적는다면 해당 test.scss파일이 c라는 변수에 담기게 된다.
그래서 최종적으로는

.box{
    color: c.$color;
}

위에 코드가 된다.