사스 Sass

라용·2022년 8월 29일

위코드 - 스터디로그

목록 보기

19/100

위코드 파운데이션 과정을 들으며 정리한 내용입니다.

CSS Preprocessor

기존 CSS 문법의 불편함을 개선하고자 나온 기술이 CSS 전처리기입니다. CSS 전처리기의 문법으로 파일을 작성하면, 실제 실행 전 브라우저가 읽을 수 있는 CSS 파일로 변환해줍니다. CSS 전처리기에는 많은 종류가 있는데 그 중 Sass 를 알아보겠습니다.

Sass

Sass 는 Syntactically Awesome Style Sheets 의 약자입니다. 문법적으로 굉장한 스타일 시트라는 의미입니다. 기존 CSS 에서 겪었던 불편들을 해결할 수 있습니다.

Sass 설치

Sass 라이브러리를 설치해야 사용할 수 있습니다. 프로젝트 폴더에서 아래와 같은 명령어를 입력합니다.

npm install sass

설치 된 후에는 package.json 의 dependencies 항목에서 확인 가능합니다.

sass & scss

사수를 작성하는 문법은 sass 와 scss 두가지인데, scss 문법 사용을 권장합니다. scss 가 sass 문법을 개선한 최신의 문법이고 범용성과 css 와의 호환성이 좋습니다.

// sass
nav
	ul
		margin: 0
		padding: 0

// scss
nav {
	ul {
		marign: 0;
		padding: 0;
	}
}

Sass 적용하기

기존 css 파일의 확장자명을 scss 로 변경하고 해당 css 를 적용한 js 파일에서 Import 한 css 파일 확장자도 변경합니다. 변경 후 스타일이 깨지는 부분을 발견할 수 있습니다. SPA 에서는 각각의 js 파일이 독립적으로 css 를 가져왔더라도, 라우터에서 모든 페이지 컴포넌트가 모이기 때문에 각 css 파일에 겹치는 선택자가 있다면, 스타일이 깨지게 됩니다. 문제를 해결하기 위해선 모든 태그의 클래스 이름을 다르게 주거나 css 의 자손결합자를 사용하면 됩니다. 클래스 이름을 변경하는 방법은 이후 유지보수를 하거나 에러를 고치는데 복잡할 수 있으므로 자손결합자 방식을 추천합니다.

보통 최상위 부모 태그의 클래스 이름은 컴포넌트의 이름으로 적습니다. (카멜케이스로) 클래스 이름은 겹칠 수 있지만, 컴포넌트 이름은 겹치면 안되기 때문에, 중복을 피할 수 있습니다.

// js
const Login = () => {
	return (
		<div className="login">
			<h1 className="title">로그인 페이지</h1>
		</div>
	);
}

// scss
.login .title {
	color: red;
}

Sass 활용

Nesting

자손결합자 방식은 적용할 스타일이 많아지면 불편하기 때문에 Sass 에서는 Nesting 방식을 사용합니다. html 구조처럼 부모 자식 관계로 스타일을 표현할 수 있습니다.

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

변수

여러 곳에 사용하거나 오타가 나기 쉬운 속성은 변수로 지정할 수 있습니다.

$primary-color: #333;

body {
	color: $primary-color;
}
div {
	background-color: $primary-color;
}

선택자

네스팅 내부에서 부로 선택자는 & 로 표기합니다. button 태그에 hover 효과를 부여하고 싶다면 아래와 같이 작성합니다.

button {
	width: 200px;
	height: 50px;
	
	&:hover {
		width: 400px;
		height: 100px;
	}
}

mixin

@mixin 변수이름 {스타일 속성} 은 중복되는 스타일 속성을 여러개로 묶어 변수에 담을 수 있습니다. 담긴 변수를 사용할 때는 @include 변수이름 을 써줍니다.

@mixin flexCenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

.info {
	@include flexCenter;
}

함수를 사용하는 것처럼 인자를 넣어서 스타일 속성 틀은 유지하고 속성 값만 변경할 수도 있습니다. 사용할 때 인자로 속성값을 입력합니다.

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

.info {
	@include flexCenter('space-between', 'center');
}