Saas는 햄튼 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일이고
CSS 전처리기(Preprocessor)인 스크립트 언어이다.

Sass란?

• Css를 효율적으로 작성할 수 있도록 도와준다.
• 코드 중복을 줄일 수 있을 뿐만 아니라, 다양한 기능을 사용해(@extend/@include ,변수 사용 등) 유지보수가 더욱 편리하다.
• SASS문법에 맞게 CSS를 작성해서 SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환한다.

Sass npm install

npm install node-sass@4.14.1 --save

Nesting

Nesting이란 특정 CSS 선택자(selector)를 다른 선택자(selector)의 스코프에 포함시키는 것

nav {
  ul {
    margin: 0;
	li {
		display: inline-block;
	}
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

변수 사용

$blueColor: blue;

input {
 background-color: $blueColor;
}

$ 을 이용해서 변수를 선언해 사용할 수 있다.

@extend / @mixin 사용

@extend

%flex-center {
	display: flex;
	justify-content: center;
 	align-items: center
}

% 기호를 이용해서 자주 쓰는 css 문법들을 선택자를 선언하고 나면
@extend %flex-center; 를 이용해서 재사용 할 수 있다. (정적인 부분을 위해 쓰기 좋다)

@mixin / @includes

@mixin flex($justify-content, $align-items:center){
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
}

mixin을 이용해서 동적으로 자기가 원하는 부분만 바꿔서 사용할 수 있다. mixin을 이용해 선언할 때
초기 값을 인자에 줄 수 있고, 불러올 때는 @includes를 이용해서 사용할 수 있다.

.container {
    @includes flex;
}


.container {
    @includes flex(space-around);
}

그대로 사용할 때는 자기가 지정한 이름만 사용할 수 있고, 인자 값을 이용해서 언제든지 자기가 원하는 속성을 변형해서 사용할 수 있다.