Sass

• Syntactically Awesome Style Sheets
• Less, Stylus와 같은 CSS 전처리기(CSS Preprocessor)의 일종
• 네스팅, 변수 사용, 조건문 등 다양한 기능 내장
• Sass 3.0을 Scss라고 부름

설치 및 적용

// 1. Sass 설치
npm install sass

// 2. 설치 확인
"dependencies": {
	"@testing-library/jest-dom": "^5.17.0",
	"@testing-library/react": "^13.4.0",
	"@testing-library/user-event": "^13.5.0",
	"react": "^18.2.0",
	"react-dom": "^18.2.0",
	"react-router-dom": "^6.15.0",
	"react-scripts": "5.0.1",
	"sass": "^1.66.1",
	"web-vitals": "^2.1.4"
},

// 3. import
import React from 'react';
import './common.scss';

문법(Syntax)

// scss 파일 내 import 처리
@import "reset", "common"

// 변수(Variables)
$primary-color: #1351f9;

.text {
	color: $primary-color;
}

// 중첩(Nesting)
.parent {
	font-size: 20px;
	.child {
		color: red;
	}
}

// 부모 선택자 참조(Ampersand)
.parent {
	font-size: 20px;
	&.bg-red {
		background-color: yellow;
	}
}

// 재사용(Mixin)
@mixin ellipsis {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.text {
	@include ellipsis;
}

// 믹스인의 매개 변수와 기본값
@mixin fontStyle ($size: 10px, $weight) {
	font-size: $size;
	font-weight: $weight;
}

.text1 {
	@include fontStyle(400);            // font-size: 10px; font-weight: 400;
}

.text2 {
	@include fontStyle(20px, 400);      // font-size: 20px; font-weight: 400;
}

.text3 {
	@include fontStyle(40px, 700);      // font-size: 40px; font-weight: 700;
}

// 믹스인과 조건문
@mixin lineClamp ($line: 1) {
	if ($line > 1) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: $line;
		overflow: hidden;
		text-overflow: ellipsis;
	} else {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

.text1 {
	@include lineClamp();
}

.text2 {
	@include lineClamp(3);
}

// 함수(Function)와 연산
@function landscapeCell ($ratio) {
	@return $ratio / 2;                // width: 50px;
}

.landscape-cell {
	width: landscapeCell(100px);
}