[Sass] @mixin

[ Sass 란? ]

• Syntactically Awesome Style Sheets
• CSS 전처리기
• 복잡한 작업을 쉽게 할 수 있도록 도와주고, 스타일 코드의 재활용성과 코드의 가독성을 높여 유지보수를 더욱 쉽게 해준다.
• 확장자: .scss 또는 .sass
  
  

[ .sass vs .scss ]

• .sass 는 세미콜론(;)과 중괄호({})를 사용하지 않고 탭(tab)을 이용해 스타일을 정의한다.
• .scss 는 기존의 .css 파일과 비슷한 문법을 이용한다.
• .sass 와 .scss 모두 변수를 선언할 때는 $를 앞에 붙여줘야 한다.

.sass

$primary-color: #333

body
	color: $primary-color

.scss

$primary-color: #333;

body {
	color: $primary-color;
}

[ Sass 사용하기 ]

$ npm install node-sass

.scss 예시

[ @mixin ]

mixin 은 함수와 비슷한 동작을 하는 Sass 문법이며 반복적으로 재사용할 css 스타일을 정의해준다.

mixin 정의하기

@mixin boxSize($size) {
    width: 100px;
    height: 20px * $size;
}

mixin 호출하기

@include boxSize(1)