SCSS: 함수, extend, import

함수

mixin과 유사하지만 반환되는 내용이 다름.

mixin은 지정된 style 반환, 함수는 연산된computed 값을 반환

별도의 지시어 없이 사용하기 때문에 내장함수와 충돌하지 않도록 함수명 설정할 것

 

@function 함수이름($매개변수) {
@return 값
}

 

 

내장함수

// 내가 정의한 함수
@function extract-red($color) {

// 내장 함수
@return rgb(red($color), 0, 0);
}

div {
color: extract-red(#D55A93);
}

 

https://sass-lang.com/documentation/modules

Sass: Built-In Modules

---

확장 extend

특정 선택자가 다른 선택자의 모든 스타일을 가지고자 할 때 사용

@extend 선택자;

 

 

클래스 확장

 

 

 

체인확장

 

멀티 클래스 확장

@extend 클래스명;
@extend 클래스명;

@extend 클래스명,클래스명;

 

 

부모 확장

 

 

placeholder

클래스 확장과 비슷하지만 가상의 선택자를 만들어 규칙 생성

 

extend 사용시 주의사항

• 현재 선택자가 어디에 첨부될 것인지
• 부작용이 최대치 될 수 있는지
• 한번의 확장으로 css용량이 얼마나 커질지

위에서 문제가 생길 것 같다면 mixin 사용할 것

 

---

import

다른 css요소 가져오기

@import "hello.scss";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;
@import "header", "footer";