Sass

Sass 파일의 확장자는 .scss 입니다.

설치

npm install node-sass --save

• 설치 시 node-modules 폴더에 node-sass 폴더가 생성됩니다. (package source code)
• --save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트

Nesting 기능 적용하기

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

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

기존 css 가 위 와 같을 경우 아래와 같이 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있습니다. 이 와 같이 상위 요소에서 하위 요소로 중첩되어 표현하는 방식을 Nesting이라고 합니다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
		li {
			display: inline-block;
		}
  }

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

그 밖의 다양한 기능

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

button {
  width: 200px;
	height: 100px;
	background-color: blue;
}

button:hover {
	background-color: red;
	cursor: pointer; 
}
 
input {
	background-color: blue;
}

input:focus {
  background-color: red;
}

위 와 같은 css 파일을 아래와 같이 변경 할 수 있습니다.

$theme-color: blue;

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

login-container {
  @include flex-center(center, center);
	button {
    	        width: 200px;
		height: 100px;
		background-color: $theme-color;

		&:hover {
			background-color: red;
			cursor: pointer;
		}
	}
	input {
		background-color: $theme-color;

		&:focus {
		  background-color: red;
		}
	}
}

$<변수 명> 을 통해 하위에서 변수처럼 사용이 가능합니다.
@mixin <함수 명> 의 경우 @include <함수 명> 와 같이 함수로 사용처럼 사용이 가능합니다.

• ($justify: center, $align: center) 기본값 및 css 설정 값을 넘겨 줄 수 있습니다.

&:hover 와 같이 특정 조건에서의 css 값을 &를 통해 설정 할 수 있습니다.

import <경로> 를 사용하여 외부의 다른 scss 파일에서 설정한 함수 또는 변수를 사용 할 수 있습니다.

• ex) /src/styles/common.scss 파일이 존재한다고 했을때 @import "/src/styles/common.scss";