SASS/SCSS: 연산자, mixin

 

산술연산

 

 

나누기 조건 3가지

값 또는 그 일부가 변수인 경우

값이 ()로 묶여있는 경우

다른 연산자와 함께 사용되는 경우

 

 

---

 

mixin

	SCSS	SASS
선언	@mixin 믹스인이름{ 스타일; }	=믹스인이름 스타일
사용	@include 믹스인이름;	+믹스인이름

 

 

선택자 이용하기

 

인수 argument

기본 인수 사용

 

인수 default value

@mixin 믹스인이름($매개변수: 기본값) {
스타일;
}

 

인수 응용

 

키워드 인수 keyword argument

입력순서 불필요, 미작성 인수 적용을 위해 기본값(null) 설정 추천

@mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) {
스타일;
}

@include 믹스인이름($매개변수B: 인수);

 

가변인수 variable arguments

@mixin 믹스인이름($매개변수...) {
스타일;
}

@include 믹스인이름(인수A, 인수B, 인수C);

 

@content