@mixin 자주 사용하는 css 들을 @mixin으로 뽑아서 사용 사용법 argument 생긴것과 같이 함수처럼 argument를 전달하여 확장성을 높일수 있다. > default값 지정 @content @mixin을 사용하는 곳에서 추가적으로 확장이 가능하다. @mixin과 비슷한 기능 @function @mixin은 @include를 사용해야 했지만 @function은 바로 사용 가능 어떤 특정값만 반환함 |선언시 접두어|사용시 접두어|반환값| |:--|:--:|:--:| |@mixin|@include|css 코드| |@function|없음|특정한 값| '%' placeholder @mixin과 하는 일은 비슷하다. 인자를 사용할 수 없다. 공통스타일을 상속받는식으로 사용 |선언시 접두어|사용시 접두어|용도|차이점| |:--:|:--:|:--:|:--

🤔 Sass란 ? Syntactically awesome style sheet CSS의 전처리기, CSS로 컴파일되는 스크립트 언어 CSS에는 없는 프로그래밍 문법적인 요소들이 추가되었다. 변수 선언 ($) 반복문 (@for) 조건문 (@if) 4가지 자료형을 지원한다. number string color boolean Sass를 사용해야 하는 이유 규모가 큰 프로젝트에서는 CSS 만으로 관리가 어렵다! CSS 생산성을 높이고 깔끔하고 가독성좋은 코드로 관리 가능 Sass vs SCSS

Sass의 변수 선언 자주 사용하는 CSS value를 값으로 저장하여 사용 Typography Color Grid 선언 방법 변수에 담을 수 있는 값들 CSS value 모든 값 number string *문자열은 ' '로 감싸주어야 한다. boolean list / map 유의사항 반드시 앞에 $를 붙여주어야 한다. 영문 대소문자, -, _, 숫자 만 사용가능 변수명은 숫자로 시작할 수 없다. 컨벤션 소문자, - 조합 ✔ 대문자, _ 조합 스코프 Sass에도 스코프 개념이 있다. (자바스크립트의 스코프를 생각하면 쉬움) map key: value 형태를 갖는 변수 선언 가능 map-get 내장함수를 사용하여 value값 추출