[웹 국비 교육 55일차] SASS/SCSS : 기본 사용법, SASS/SCSS 변수, @mixin 사용법 등 정리(25.8.13.)

안녕하세요! 

2025년 8월 13일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 55일차 수업 내용을 정리해보았습니다.

 

오늘은 SASS(SCSS) 기본 사용법, SASS/SCSS 변수, @mixin 사용법(매개변수와 인자)에 대해 배웠습니다.

---

 

54일차 학습내용

 

 

1강

## SASS/SCSS 쓰는 이유

CSS는 웹페이지의 스타일을 정의하는 데 매우 유용하지만, 프로젝트 규모가 커지고 구조가 복잡해질수록  
코드의 중복이 많아지고 관리가 어려워지는 문제가 발생합니다.

SASS는 이러한 문제를 해결하기 위해 고안된 CSS 전처리기로,  
더 나은 구조화, 재사용성, 가독성을 제공하여 유지보수를 용이하게 합니다.

 

## SASS/SCSS는 CSS를 대체하기 위한 언어가 아니다.

SASS는 CSS를 대체하는 것이 아닌, CSS의 기능을 확장한 전처리기 언어입니다.  
즉, SASS는 더 효율적으로 스타일을 작성할 수 있도록 도와주는 도구일 뿐,  
궁극적으로는 SASS 코드를 컴파일하여 일반 CSS 파일을 생성하는 방식으로 작동합니다.

따라서, SASS를 사용하더라도 최종적으로 웹 브라우저는 여전히 CSS 파일을 해석하여 스타일을 적용합니다.

---

2강

## SASS/SCSS 기본 사용법

---

3강

 

## SASS/SCSS 변수

 

---

4강

 

## @mixin 사용법

 

- 윗 상자 hover 전 | 후

@mixin box-base(){
  width: 300px;
  height: 300px;
  background-color: gold;
  border-radius: 1.2rem;
  trasnition: all .3s ease;
  margin: 10px;
  
  &:hover {
    background-color: blue;
  }
}

.box-1{
  @include box-base();
}

hover 전 후

 

- 아래 상자 hover 전 | 후

.box-2{
  @include box-base();
  background-color: purple;
  
  &:hover {
    background-color: green;
  }
}

hover 전 후

---

5강

 

## @mixin 사용법 - 매개변수와 인자

 

 

 

 

 

믹스인 요약

믹스인 정의: @mixin 키워드를 사용하여 스타일 블록을 정의
믹스인 사용: @include 키워드를 사용하여 정의된 믹스인을 호출
인자 사용: 믹스인에 인자를 전달하여 유동적인 스타일 생성 가능
기본값 사용: 인자에 기본값을 설정하면 필요할 때만 인자 전달 가능

 

 

 

@mixin 이란?

- @mixin: 재사용 가능한 스타일 블록 정의 방법
1. 매개변수 없는 믹스인을 정의할 수 있음
2. 매개변수 있는 믹스인을 정의할 수 있음
  - 매개변수를 초기화하지 않으면 @include 시마다 인자값을 꼭 전달해야 함
  - 매개변수에 기본값이 있으면 인자 전달 생략 가능
  - 인자를 전달할 경우에는 매개변수 순서와 개수에 맞게 전달해야 함

 

 

---

 

마무리