Flask를 사용한 이번 프로젝트에서는 SCSS를 사용해서 개발을 해보려고 합니다. SCSS는 정말 옛날에 남이 만들어놓은 코드를 수정할 때 한 번 사용한 적이 있긴 하지만, 그 뒤로 바로 React 개발로 넘어와 Styled-component와 같은 라이브러리를 접하면서 SCSS를 접할 기회는 더 없었던 것 같습니다.
예전에 SCSS가 작업하기 좋다는 말은 많이 들었는데 이번에 몸소 직접 느껴보려고 합니다.
SCSS란?
설치하기에 앞서 SCSS가 뭔지 정리하고 넘어가보겠습니다 :)
SCSS는 CSS 확장 언어이자 전처리기로, 모든 버전의 CSS와 완벽하게 호환하며 변수, 중첩, 상속, 함수, 반복문 등을 지원하여 더 쉽고 효율적으로 코드를 작성할 수 있게 해줍니다.
SCSS를 접하다보면 Sass도 같이 볼 수 있는데, 두 개가 서로 다른 것은 아니고 Sass가 먼저 나온 CSS 확장 언어이고, SCSS가 기존 Sass의 불편한 점들을 개선해서 CSS 문법과 거의 동일하게 작성할 수 있도록 만들어서 CSS와의 호환성을 높이기 위해 새로운 문법을 도입한 스타일 시트로 보면 될 것 같습니다.
결국 같은 기술이기 때문에 공식 문서(링크)도 하나입니다 :)
설치하기
저는 Flask가 직접 SCSS를 처리하는 방식 대신에 npm으로 scss를 설치해서 Flask는 결과 CSS만 사용하도록하는 방식을 선택했습니다. 이 방식을 선택한 이유는 개발하면서 Flask가 점점 무거워질 SCSS를 처리하는 게 성능적으로 좋은 행동은 아니라고 생각했기 떄문입니다.
1. npm으로 sass를 설치합니다.
npm install -D sass
2. 그리고 app.py 파일이 위치한 곳에 static/scss/style.scss 파일을 생성해줍니다. 저는 body에 배경색 #d9d9d9를 적용하는 코드를 작성했습니다. 아직 크게 작성한 코드가 없어서 scss 문법을 사용하지는 않았지만 정상적으로 빌드가 잘 동작하는지만 살펴보겠습니다.
body {
backgroud-color: #d9d9d9;
}
3. css 적용할 html의 <head>태그 안에 아래 <link> 태그 코드를 추가해줍니다.
<head>
...
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
</head>
4. sass 명령어로 scss를 컴파일 해줍니다. 그러면 static 폴더안에 css 파일이 자동으로 생성됩니다. css 파일 이름은 scss 파일 이름과 동일하게 생성됩니다. 그리고 watch모드를 통해 static/scss 폴더를 계속 감시하다가 만약에 파일 수정이 발생하면 자동으로 static/css 폴더의 css 파일을 새로 빌드해줍니다.
npx sass static/scss:static/css --watch
5. 최종적으로 css 파일을 적용한 페이지 결과물을 확인할 수 있습니다.
마무리
scss문법을 사용한 코드로 구체적인 예를 들지는 않았지만, 설치와 사용 방법을 중점으로 작성해봤습니다.
간단했지만 css 문법을 그대로 사용해서 러닝커브가 거의 없는 편인 것 같습니다.
예전에는 마냥 새로운 것들이 두려웠는데, 요즘은 뭐든 두려움없이 배우기 좋은 시대인 것 같습니다.
읽어주셔서 감사합니다 :)
댓글은 언제든 환영입니다 ☺️
참고
'개발 지식 > Flask와 Jinja2' 카테고리의 다른 글
| Flask와 Jinja2로 개발하기 - (4) Flask로 작성한 코드 살펴보기(feat. Next.js) (0) | 2025.11.10 |
|---|---|
| Flask와 Jinja2로 개발하기 - (2) Prettier와 Black 설정하기 (0) | 2025.11.01 |
| Flask와 Jinja2로 개발하기 - (1) 설치 및 간단한 예제 실행하기 (0) | 2025.10.31 |