[scss/sass] scss 사용법 익히기 (@use, @forward, @function, @error, @warn)

sass 공식문서 훑어보기

 

At-Rules

https://sass-lang.com/documentation/at-rules

Sass: At-Rules

 

@use

- 다른 파일 전체를 해당 파일의 상단에 가져다 붙여줌.

@use '파일 url';

 

@forward

 - @use 해야하는 파일이 여러개일 때, @forward를 사용해서 파일을 합친 뒤에 통합 scss를 @use로 불러온다.

 

@use 'reset';
@use 'color;
@use 'font';

//이런식일 때 module.scss 파일을 하나 만들어서 그 안에서 forward 해준다

@forward 'reset';
@forward 'color;
@forward 'font';


그리고 원래 적용하기로 했던 style.scss 상단에 module 파일만 @use 해주기
@use 'module'

 

@import 는 문제가 있어서 공식문서에서 사용을 금지할것을 권장함.

@use 사용 권장(dart.sass에서만 지원중)

 

@function

  - @return을 통하여 특정 '값'을 반환해주는 역할. mixin과는 차이가 있다.

  - mixin은 style 자체를 반환함.

$max-width: 80px;

@function columns($number, $columns) {
  @return $max-width * ($number / $columns)
};

.box1 {
  width: columns(12, 4);
}

function 의 사용은 js에서 사용하던 방식과 유사하다. 

위의 함수에서는 80 * (12 / 4) 값인 240px 이 리턴된다.

 

심지어 안에서 for문, if 문도 사용할 수 있다.

 

 

@error, @warn

코드 디버깅 하듯이 에러메시지, 경고메시지를 띄울 수 있다. vscode 하단에 출력창에서 확인가능

 @mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }
}

.sidebar {
  @include reflexive-position(top, 12px);
}

 

 

입력된 값이 left도, right도 아닌 top 이니까 오류 메시지가 발생한다.

@error 와 @warn 의 차이는 컴파일을 중지 하는가, 하지 않는가의 차이이다 

@error는 오류메시지를 띄우고 컴파일을 중지하지만,

@warn은 컴파일을 중지하지 않는다.