[내일의집] scss - mixin, function, flex map

01 Mixin 기본 문법

 

1. 선언하기

• @mixin 믹스인이름( ) { }
• 파라미터가 없다면 괄호는 안 붙여도 된다

2. 사용하기

• @include 믹스인이름( ) ;

02 Minxin 활용하기

 

1. 파라미터의 적절한 활용

• 어느 기능까지를 이 mixin에서 사용하고 어디서부터는 외부로 뺄 지를 잘 계산하고 리팩토링해줘야 한다.
• 파라미터 설정했는데 인수가 없을 땐 에러를 낸다. 믹스인이름(파라미터 : false)로 설정하면 파라미터가 없을 때 false가 그 자리에 들어간다.
• 이후 @if '파라미터가 false가 아닐' 때 혹은 'type-of(파라미터) == 원하는 타입'일 때만(유효성 검사) 작동하는 분기를 만들어주면 false 영향 없이 마무리할 수 있음.
• @mixin에서 @media 사용 시 { @content } 작성해 두면, @include 시 { } 안에 들어간 내용이 그 자리에 들어감.

 

2. 리팩토링

• 인수 안 받는 기본 기능만 만들어두고, 그 mixin을 호출하는 외부 mixin에다 파라미터를 받는 방법도 있다!

여기서 또 'color가 적용되는 부분이 지정 안 됐는데 어떻게 적용되지' 이랬다. css에서 선택된 범위 안에서 호출되는 것이니 걱정ㄴㄴ

• '미디어쿼리문 자체'를 mixin으로 만들 수 있음(내용은 아님)
  • 미디어쿼리문은 기니까 mixin화 해두면 include하기도 쉽고 읽기도 편해서 쓰는 것 뿐, 그 안의 내용을 불러와주는 기능은 없다.
  • 미디어쿼리문과 내용을 mixin에 때려넣으려고 하면 '블록을 받지 않는다'는 오류가 뜬다. 쿼리문 블록 안에 '@content'라고 넣어주고, 그 content는 include하는 상황에서 정의해주면 됨

3. position mixin으로 만들어두기

• absolute 가로세로 센터정렬, flex 가로세로 정렬 등 여러 번 쓰고 번거로운 것들은 mixin으로 미리 만들기
• 인자로 원하는 설정을 받아 동작할 수 있도록 작성(유효성 검사 해주기!!)
• 자주 쓰는 옵션을 dafault로 설정

 

 

03. function과 map으로 더 더 리팩토링

1. @function이름 { } : mixin이 여러 스타일을 반환한다면 function은 1개의 '값'만을 반환함.
2. $map이름 ( )  : object와 비슷한 key-value 보따리. 변수 지정할 때처럼 $ 쓴 뒤 { }가 아니라 ( )를 사용하면 map이 된다. 값을 불러올 때는 map-get( $map이름, key값 ) 이라는 scss 내장함수를 활용!
3. 이 코드에서는 'end'라고만 써도 'flex-end'를 실행시키는 함수를 만드는데 -> 모든 인수를 if 절로 검사해서 지정된 값을 내보내자니 코드가 너무 길어져서 -> map에서 처리하도록 연동시킨 것