먼저 터미널에서 scss 파일을 css로 컴파일 할 수 있게 해주는 패키지를 다운로드 한다.
npm install -g sass
scss 확장자를 가진 파일을 만든 후 scss 코드를 작성한다.
컴파일 명령어
sass 컴파일 할 폴더명:css
위 명령어를 입력하면 css 폴더가 생성된 후 scss 파일이 css파일로 컴파일 된 것을 볼 수 있다.
또한 scss 파일명 앞에 _를 붙이면 별도의 css 파일로 컴파일 하지 않는다.
@import
표준 css에서는 @import url() 형식으로 파일을 가져오지만
scss에서는 @import "./파일명" 으로 가져온다.
이 때 확장자와 파일명 앞에 붙은 _는 생략이 가능하다.
@import "./variables";@import는 모듈로 가져오는 것이 아닌 파일의 정보를 통으로 가져와서 현재 파일에 통합해서 사용하겠다는 의미이다. 따라서 네임스페이스 사용이 불가능하다.
@import를 사용할 때 주의해야 할 점은
1. url 함수를 사용할 때
2. css 확장자를 명시할 때
3. http 또는 https를 통해 URL 주소를 사용해서 특정 파일을 가져올 때
css 파일에 컴파일 돼서 출력이 된다.
@use
@use로 모듈을 가져오면 네임스페이스를 부여할 수 있다.
네임스페이스를 부여하면 이름이 충돌되는 것을 방지할 수 있다.
파일명으로 네임스페이스를 사용하고 싶지 않다면 as 키워드를 사용해 네임스페이스를 변경할 수 있다.
@forward
@forward를 사용하면 현재 불러온 모듈을 외부에서도 사용할 수 있게 해준다.
@forward도 네임스페이스를 지정할 수 있다.
@use 처럼 모듈의 이름이 되는 것이 아닌 접두사를 붙여 네임스페이스를 지정한다.
주의할 점은 지정한 네임스페이스를 사용할 때 변수 같은 경우는 $앞이 아닌 $뒤에 작성한다.
