Sass

---

💡 Sass(Syntactically Awesome Style Sheets)는 css의 단점을 보완해 등장한 css 전처리기 중 하나다.

• sass는 라이브러리이기 때문에 설치를 해줘야 sass확장자로 변경할 수 있다.
• sass문법과 scss 문법이 있는데 scss가 범용성, css호환성 등 여러 측면에서 장점이 있다.
• 만약 스타일이 원하는 대로 적용 되지 않으면 head안 스타일을 확인해 내가 원하는 대로 import순서가 입력 됐는지 확인할 필요가 있다.

네스팅

• HTML의 구조 처럼 scss도 상위 선택자 내부에 하위 선택자를 넣어서 구조를 짜야한다.
• 부모 선택자에서 자식 선택자로 속성이 상속된다.
• 네스팅을 안하면 컴파일 시 컨터이너, 바디 등 따로 된다.
• css에선 자식 선택자가 많으면 자식 선택자들은 부모 선택자의 이름을 넣어줘야 했다.
  • 그래서 반복적인 선택자 명을 사용할 수 밖에 없는데 이러한 수고를 덜어 효율적으로 사용하려고 이용한다.
• 네스팅은 가독성 측면이 아닌 속성의 적용 여부가 우선이 된다.

/*CSS*/
article {
	background-color: white;
}
article h1{
		color: blue;		
	}
article p{
	font-size: 20px;
}

/*Scss*/
article {
	background-color: white;
	h1{
		color: blue;		
	}
	p{
		font-size: 20px;
	}
}

변수

// styles/variables.scss
$bgColor = #EEEEEE;

// Main/Main.scss
@import '../../styles/variables.scss';

body{ background-color: $bgColor }

• 사용이 빈번한 속성 값들은 변수로 지정하면 오타가 날 원인을 제거할 수 있다.
• variables.scss에 변수들을 모아놓고 Main.scss에서 호출해서 사용할 수 있다.

&선택자

/*css*/
button {
	background-color:blue;
}

button:hover {
		background-color:skyblue;
}

//scss
button {
	background-color:blue;

  &:hover {
		background-color:skyblue;
  }
}

scss에서 &을 사용하면 부모 선택자로 바뀐다.
위의 네스팅한 코드를 보면 &을 넣어주면 검사기에서 확인하면 button:hover라고 잘 나온다.

mixin

변수와는 다르게 중복되는 속성이 여러개 있을 때 사용한다.
예를 들어 자주 사용하는 width와 height를 mixin 방법으로 만들어 보겠다.

//1번
@mixin widthHeight {
	width:400px;
	height: 600px;
}

.feed {
  @include widthHeight;
}

//2번
@mixin widthHeight($w, $h) {
	width:$w px;
	height:$h px;
}

.feed {
  @include widthHeight(400,600)
}

1번 처럼 속성값을 지정할 수도 있고 2번 처럼 인자를 통해 속성값을 변경할 수도 있다.

마치며

css를 작성할 때 항상 class명을 고민하느라 시간을 많이 쓰고 오류가 발생해서 골치가 아팠는데 Sass를 이용하면 지금까지의 걸림돌 이였던 class명을 더이상 걱정하지 않아도 되어 아주 유용한 라이브러리 같다.