Sass(SCSS)를 사용하는 프로젝트에 관한 개인적인 정리글.

---

🍊 Sass

Sass 파일 자체로는 스타일 적용 불가능.
컴파일 과정을 거쳐 CSS 파일로 변환하여 적용해야 함.

Sass 문서는 기본적으로 tab 에 굉장히 예민함.
--> 하나가 꼬이면 많은 부분을 손대서 고쳐야 할 수도 있음.

따라서 개발시에는 Scss 파일로 개발하게 된다.

CSS 코드가 한 파일로 제작된다면?

• 가독성 저하, 어디서부터 어디까지가 어떤 스타일을 담당하고 있는지 파악하기 어려움.

• 중복 코드 혹은 레거시 코드를 생성하기 쉬움.

• 단순 수정에도 전체 코드를 일일이 확인해야 함.

• 프로젝트가 커질수록 CSS로 작업하는 속도가 느려짐.

✅ 현 개발 시점에서 Sass(Scss) 개발은 필수.

---

🍊 Sass 7-1 패턴

Sass 는 기본적으로 상황에 맞게 파일들을 나누고 폴더를 쪼개 하나의 CSS로 컴파일하여 사용한다.

• base/
• components/
• layout/
• pages/
• themes/
• abstracts/
• vendors/

• 파일명에 _ 가 붙는 경우 @import 되어 사용될 것임을 암시함.

• @import 시에는 _ 를 빼고 경로를 잡아도 인식됨.

Example

@import './abstracts/variables.scss';
@import './abstracts/mixins.scss';
@import './base/reset.scss';
@import './component/button.scss';
...

---

🍊 기본적인 프로젝트 생성 구조

아래 구조와 같이 생성한다.

• project > assets > css, images, scss 폴더 생성.

• project > docs 폴더 생성.

• html 파일들은 docs 에 저장.

• ❗️주의 : css 파일은 직접 생성하는게 아님!

• scss 파일들은 scss 폴더에 저장하여 Live Sass Compiler 구동.
  --> css 파일들로 변환하여 settings.json 에 등록된 경로로 저장.

📂 scss 폴더 구조

샘플 프로젝트에서는 아래와 같은 구조이다.

• abstracts > _variables...
  ㄴ 디자이너들이 지정한 색상 팔레트, 폰트 기본 설정 등이 저장되어있다.
  ㄴ 사이트에서 공통적으로 사용되어야 할 디자인 변수값들이 모아져있다.
  ㄴ height, padding, margin 등 구역의 영역 변수값들을 주로 모아두기도 한다.

• base > _reset.scss
  ㄴ 모든 프로젝트에서 기본적으로 필요한 스타일.
  ㄴ 'normalize.css', 'reset.css' 로 검색하면 많은 boiler plate code 가 나옴. (최근에는 normalize.css 를 많이 사용.)
  ㄴ 브라우저의 기본 스타일을 제거하고 입맛대로 스타일링하기 위해 초기화 필요.
  ✅ 프로젝트에 맞게 수정해서 사용하도록 하자!

📂 .scss @import

위 폴더 구조의 순서대로 styles.scss 에 @import 하여 불러온다.
ㄴ @import "상대경로명";

@import "./abstracts/variables_color";
@import "./abstracts/variables";

@import "./base/preset";
@import "./base/reset";

• Live Sass Compiler 를 사용함.

• 위처럼 assets/css 내부에 .css 파일이 자동으로 생성됨.

• 모든 .scss 파일은 assets/scss 내부에 위치함.

---

🍊 SCSS 미디어 (@media / @mixin)

scss 에서 미디어 쿼리를 사용하는 법을 간단하게 정리.

1.

• 변수값을 모아둔 _variables.scss에 아래와 같이 선언한다.
• @content 는 mixin 변수를 import시에 원하는 스타일을 추가하는 기능이다.

$변수1: 값1;
$변수2: 값2;

...

@mixin 변수명 {
	@media (조건) {
    	@content;
    }
}

...

2.

• 실제 사용할 .scss 파일에서 해당 변수명을 @import 하여 호출하고, 속성을 정의한다.

.container {
	@import 변수명 {
    	...
        스타일 정의
        ...
    }
}

참고자료: scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기