간단한 SASS 입문

SASS

---

1. 터미널 : npm install node-sass

2. name.sass 파일 생성 후 name.sass파일을 적용할 곳에 @import './Name.scss'; 해준다.

---

nesting

div.container {
	h4{
	color : blue;
	}
	p {
	color: green;
	}
          }

부모 샐랙터 내부의 자식 샐랙터를 nesting하여 style을 줄 수 있다.

---

@mixin + @include

@mixin myalert {
  background-color: #eeeeee;
  padding: 20px;
  border-radius: 5px;
  max-width: 800px;
  width: 100%;
  margin: auto;
  p {
    margin-bottom: 0;
  }
}

.box{
 @include myalert()
	add optional style
 }

---

함수처럼 사용이 가능한 @mixin + @include

유사한 스타일이 자주 사용될때 주로 쓰이는 스타일을 mixin으로 정의하고 사용하면 매우 유용하다

---

자주 쓰이는 샐랙터의 style을 그대로 가져오는
extend 기능도 있다.