02-Scss 요약 – Nextra

🎉 berenickt 블로그에 온 걸 환영합니다. 🎉

1. SCSS의 장점 및 기능

장점 : 가독성 및 유지보수성 향상,
- 재사용성 높임, 연산 및 함수 정의, 파일 분할 및 모듈화로 코드 관리
변수 (Variables): 스타일에서 사용되는 색상, 폰트 크기 등을 변수로 정의
중첩 규칙 (Nested Rules): 요소의 계층 구조를 중첩하여 스타일을 작성
믹스인 (Mixins): 스타일 코드를 재사용하기 위한 함수와 같은 기능을 제공
모듈 (Modules):
- 하나의 파일에 모든 스타일 코드를 작성하지 않고,
- @use 규칙을 사용해서 여러 파일을 모듈로 나눠서 사용할 수 있음
연산과 함수 (Operators):
- SCSS는 수치 연산을 지원하며 내장 함수를 사용하여
- 동적인 스타일을 생성할 수 있음 (e.g. darken(), lighten() 함수)

자세한 문법은 공식문서 가이드 참조

https://sass-lang.com/guide/

2. SCSS 기능

2.1 변수

1// 변수 정의
2$primary-color: #3498db;
3$font-size-large: 18px;
4$margin-default: 10px;
5
6// 변수 활용
7.header {
8  background-color: $primary-color;
9  font-size: $font-size-large;
10  margin: $margin-default;
11}
12
13.button {
14  background-color: $primary-color;
15  font-size: $font-size-large;
16  margin: $margin-default;
17}

SCSS 변수는 스타일시트에서 자주 사용되는 값을 저장하고 재사용할 수 있음

스타일 일관성 유지, 효율적인 업데이트
e.g.) 글꼴 크기, 여백 값 등을 변수로 저장하여 코드 중복을 피하고 유지보수 간소화
변수를 사용하면 스타일 코드가 보다 명확해지고 스타일을 정리하는데 더욱 편리함

2.2 중첩 규칙 (Nexted Rules)

1.header {
2  background-color: #333;
3  padding: 20px;
4}
5h1 {
6  font-size: 24px;
7  color: white;
8}
9.menu {
10  display: flex;
11  li {
12    margin-right: 10px;
13  }
14  a {
15    text-decoration: none;
16    color: white;
17    &:hover {
18      text-decoration: underline;
19    }
20  }
21}

CSS 규칙을 더 명확하고 계층적으로 표현
코드의 가독성을 높이고, 유지보수하기 쉽게 함
e.g.) 웹사이트의 헤더와 메뉴 항목에 대한 스타일을 중첩 규칙으로 작성하면 구조적으로 코드를 정리할수 있음.
상위 요소의 스타일을 중복해서 작성하지 않고도 하위 요소에 쉽게 적용 가능

2.3 믹스인 (Mixins)

1@mixin button-style {
2  display: inline-block;
3  padding: 10px 20px;
4  font-size: 16px;
5  background-color: #3498db;
6  color: white;
7  border: none;
8  cursor: pointer;
9  &:hover {
10    background-color: darken (#3498db, 10%);
11  }
12}
13.button {
14  @include button-style;
15}
16.alert-button {
17  @include button-style;
18  background-color: #e74c3c;
19}

믹스인: SCSS에서 스타일 속성과 값을 묶어서 재사용 가능한 코드 블럭을 생성하는 기능
반복되는 스타일 중복 방지
e.g.) 웹사이트에서 버튼 스타일을 자주 사용한다면 믹스인으로 버튼 스타일을 정의하고 필요한 곳에서 호출하여 사용할 수 있음
스타일 코드를 재사용 가능한 함수로 사용 가능
스타일 코드의 간결성과 일관성 유지

2.4 연산과 함수 (Operators)

1$base-font-size: 16px;
2
3.container {
4  width: 100% — 20px; // 수치 연산
5  font-size: $base-font-size * 1.2; // 곱셈 연산
6  color: darken (#3498db, 20%); // 내장 함수
7}
8.button {
9  background-color: lighten (#e74c3c, 10%); // 내장 함수
10  padding: 10px + 5px; // 수치 연산
11}

SCSS만의 수치 연산자 혹은 내장 함수를 사용하여 동적인 스타일 생성 (스타일 값 계산 & 변경)
e.g.) 웹사이트에서 여백 값을 계산하는 경우나 색상을 변화시키는 경우 등에 연산과 함수를 활용
연산자 예시: +, -, * math.div(), % 반응형 디자인이나 동적 스타일링에 유용

2.5 모듈화 (Modules)

1// _variables.scss 파일
2$primary-color: #3498db;
3$font-size-large: 18px;
4
5// _button.scss 파일
6.button {
7  background-color: $primary-color;
8  color: white;
9  padding: 10px 20px;
10  font-size: $font-size-large;
11}
12
13// _header.scss 파일
14.header {
15  background-color: $primary-color;
16  padding: 20px;
17}

1// main.scss 파일
2@import 'variables';
3@import 'button';
4@import 'header';

SCSS에서 스타일을 여러 파일로 나눠서 관리
큰 프로젝트에서 스타일을 조직화하고 유지보수하기 편하게 만들 수 있음
e.g.) 웹사이트의 다양한 컴포넌트나 섹션마다 별도의 스타일 파일을 만들고 필요한 곳에서 가져와 사용
스타일 파일이 독립적으로 유지되므로 복잡성을 낮추고 스타일 충돌 방지

01-개요 및 예시 Index