SASS/SCSS

SASS/SCSS

• SASS 공식 가이드
• Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
• Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어입니다.

1강

• SASS - Playground

SASS/SCSS 쓰는 이유

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

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

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

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

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

2강

SASS/SCSS 기본 사용법

• CODEPEN - CSS
• CODEPEN - SASS
• CODEPEN - SCSS
• 2603, SASS/SCSS 기초, 기본 사용법

3강

SASS/SCSS 변수

<!-- 테일윈드 -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

• CODEPEN - CSS
• CODEPEN - SASS
• CODEPEN - SCSS
• 2603, SASS/SCSS 기초, 변수

4강

@mixin 사용법

• CODEPEN - mixin

- 믹스인 정의: @mixin
  키워드를 사용하여 반복적으로 사용되는 스타일 블록을 정의합니다.  
  이는 재사용 가능한 스타일 조각을 만들어 코드 중복을 줄이는 데 유용합니다.

- 믹스인 사용: @include
  키워드를 사용하여 정의된 믹스인을 호출하고 해당 스타일을 적용할 수 있습니다.  
  다양한 요소에 같은 스타일을 손쉽게 적용할 수 있어 유지보수가 간편해집니다.

• 2603, SASS/SCSS 기초, @mixin 사용법

5강

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

• CODEPEN - mixin, 매개변수와 인자

믹스인 요약

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

@mixin 이란?

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

[html]

<!-- 테일윈드 -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="box-1">박스 1</div>
<div class="box-2">박스2</div>

 

[css]

@font-face {
font-family: "SUIT-Regular";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}

html > body {
font-family: "SUIT-Regular";
padding: 1rem;
}

// @mixin : 재사용 컴포넌트 정의
// 정의한 믹스인 소괄호 안에는 변수를 넣는 것이 가능 => 매개변수
@mixin box-base($btn-bg-color, $font-size) {
width: 200px;
height: 200px;
background-color: $btn-bg-color;
border-radius: 1.2rem;
transition: all 0.3s ease;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: $font-size;

&:hover {
background-color: #86a372;
}
}

.box-1 {
@include box-base(#a8c2e0, 2rem);
}
.box-2 {
@include box-base(#ebda7a, 1.2rem);
}

• 2603, SASS/SCSS 기초, @mixin 사용법, 매개변수와 인자

6강

@mixin 사용법 - 매개변수 초기화

• CODEPEN - 매개변수 초기화
• 2603, SASS/SCSS 기초, @mixin 사용법, 매개변수 초기화

 

 

 

 

7강

@if문과 미디어쿼리

• CODEPEN - SCSS
• CODEPEN - @if문과 미디어쿼리
• 2603, SASS/SCSS 기초, @if문과 미디어쿼리

8강

@for문

• CODEPEN - @for문 사용법(리스트 안 쓴 버전)
• CODEPEN - @for문 사용법(리스트 쓴 버전)
• 2603, SASS/SCSS 기초, @for문

9강

@for문을 이용한 배경이미지 적용

• CODEPEN - @for문을 이용한 배경이미지 적용
• 2603, SASS/SCSS 기초, @for문을 이용한 배경이미지 적용

SCSS VSCODE 세팅

• 2602, SASS/SCSS 기초, SCSS VSCODE 세팅
• settings.json(파일 - 기본설정 - 설정 - settings.json 검색)
• 또는 ctrl + shift + p 눌러서 settings.json 선택

"liveSassCompile.settings.generateMap": false, // 만일 .map 파일 생성을 끄고 싶다면
"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css" // 내가 원하는 css 저장 폴더 경로 설정
    }
  ],
"liveServer.settings.donotShowInfoMsg": true

VSCODE에서 scss를 사용하기 위한 작업 순서

1. settings.json / scss 사용을 위한 세팅
2. scss 폴더 생성
   • style.scss 파일 생성
3. vsc 하단에 watch sass 클릭!
   • scss 파일을 css 파일로 컴파일 후 생성
   • scss에서 ctrl + s 해서 저장하면 css 파일이 생성
4. index.html에는 scss에 의해 생성 된 css 파일 연결