Sass(SCSS) 정리

Flex·2022년 3월 2일
3
post-thumbnail

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 미디어 쿼리 깔끔하게 사용하기

profile
💵 오늘을 살자

1개의 댓글

comment-user-thumbnail
2024년 1월 11일

혹시 위와 같은 디렉토리 구조로 설정하실 때 live Sass Compiler setting json 의 savePath 설정은 어떻게 하셨는지 알 수 있을까요?

답글 달기