Sass의 이전에는 ...
CSS로만 웹을 구현했을 때는, 간단한 프로젝트의 경우에 한개의 CSS파일에 넣어 관리해도 문제가 없지만,
프로젝트의 규모가 커질 경우, CSS파일의 크기가 매우 커지고 복잡해지기 때문에 관리가 어려웠다.
또한 CSS파일을 파트별로 분할한 다음 `@import` 해줄 수는 있지만, 이는 클라이언트가 직렬로 파일을 다운로드 받기 때문에
매우 느리고 성능에 문제가 생겼다.
Sass의 탄생으로 !
CSS 전처리기인 Sass의 탄생으로 성능에 영향을 주지 않고 코드를 나누어 여러 개의 파일에 담을 수 있게 되었다.
이 덕분에 유지 보수가 매우 쉬워졌고, 효율적으로 프로그래밍을 할 수 있게 되었다.
@use 와 @forward
@import 와 유사하게, Sass파일을 첨부하지만, 기능과 성능을 향상시킨 @use와 @forward
| @import | ~단점~ 1. CSS 파일과 Sass파일을 모두 import로 불러올 수 있다. => CSS파일과 Sass파일의 구분이 어려워진다. 2. 같은 파일을 여러번 import하면 코드 충돌이 일어나고 컴파일 속도가 느려진다. 3. 모든 변수와 함수가 전역으로 관리된다. => 불러온 파일에 같은 이름의 변수가 존재하면 충돌! 4. 어디서 가져온 변수, 함수인지 알기 어렵다. |
| @use | 1. Sass파일만 불러온다. => import의 첫번째 단점 해결 2. 모듈시스템처럼 동작하기 때문에 컴파일 중 딱 한번만 import 되어 속도가 빠르다. => import의 두번째 단점 해결 3. 모든 변수와 함수가 지역적으로 관리된다. => import 세번째 단점 해결 4. 모듈 별로 별도의 namespace를 가지기 때문에, 변수와 함수가 어디서 불러온지 명확하게 알 수 있다. => import의 네번째 단점 해결 |
| @forward | forward는 use와 유사하게 Sass파일을 import한다. 하지만 forward는 페이지 내에 forward한 모듈을 사용할 순 없고, 그저 모듈들을 한 파일에 모아두는 역할을 한다. 따라서 통상적으로 한 파일안의 _index.scss파일에 모듈들을 forward로 모아놓고, 해당 기능을 하는 모듈을 사용하고 싶으면 use로 _index.scss파일만을 불러오는 방식을 사용한다. |
실제 사용 코드는 아래의 아키텍쳐를 생성한 다음의 예제를 참고하자.
Sass파일을 분할하여, 프로젝트를 위한 아키텍쳐를 생성하자.
Sass파일을 용도별로 나눠서 관리하기 위해서 규칙을 생성해야한다.
따라서 다음과 같은 구조로 폴더로 Sass파일을 나눠서 처리해보자.
sass/
|
| - base/
| |- _default.scss # 기본 스타일
| |- _nomalize.scss #
| |- _reset.scss # dom 요소들의 기본 스타일을 초기화
| |- _index.scss # base 폴더에 들어있는 Sass파일을 모아놓은 곳
|
| - components/
| |- _button.scss # 버튼 스타일
| |- _form.scss # 폼 스타일
| |- _index.scss # components 폴더에 들어있는 Sass파일을 모아놓은 곳
|
| - layout/
| |- _footer.scss # footer의 레이아웃
| |- _header.scss # header의 레이아웃
| |- _index.scss # index의 레이아웃
| |- _navigation.scss # navigation의 레이아웃
| |- _layout.scss #
|
| - pages/
| |- _home.scss # home 페이지에 특화된 스타일
| |- _index.scss # pages 폴더에 들어있는 Sass파일을 모아놓은 곳
|
| - utils/
| |- _a11y.scss # 숨김 처리
| |- _color.scss # 색깔
| |- _flexbox.scss # flexbox 처리
| |- _media-qiery.scss # 미디아쿼리
| |- _mixin.scss # 여러가지 모아놓음
| |- _sprites.scss # 스프라이트 배경
| |- _unit.scss # rem, em 단위 변경
| |- _index.scss # utils 폴더에 들어있는 Sass파일을 모아놓은 곳
|
|- index.scss
폴더 구조.
Base
base/ 폴더는 프로젝트용 표준 문안 관련 내용이 있다.
reset 코드나 기본 스타일링과 유사한 Sass파일들을 저장한다.
Components
Sass로 디자인한 버튼이나 폼요소 같은 것들은 자주 사용될 수 있다.
이와 같이 작은 구성요소를 위한 components/ 폴더는 layout/보다 좀 더 작은 요소를 다룬다는 차이점을 가지고 있다.
Layout
components/ 폴더와 유사하게 재활용 될 수 있는 구성요소를 처리하지만,
그 보다는 좀 더 큰, 전역적인 프레임을 다룬다.
Pages
페이지에 특정화된 스타일이 있다면 pages/ 폴더에 넣고, 페이지명과 파일명을 일치시킨다.
Utils
utils/ 폴더에는 Sass 여기저기서 사용할 수 있는 유용한 기능들을 모아놓는다.
색을 구성하거나, flex박스 처리를 하거나, 스프라이트 이미지를 처리하는 등의 기능을 가진 Sass 코들을 모아두고
필요할 때 마다 꺼내서 쓴다.
파일 구조.
./base/_index.scss
base 폴더 아래에 있는 _index.scss는 해당 파일이 들어있는 폴더 안의 모든 scss들을 모아두는 파일이다.
따라서 다음과 같은 코드를 가진다.
/********* base 폴더 안의 index.scss *********/
/*
| - base/
| |- _default.scss # 기본 스타일
| |- _nomalize.scss #
| |- _reset.scss # dom 요소들의 기본 스타일을 초기화
| |- _index.scss # base 폴더에 들어있는 Sass파일을 모아놓은 곳
*/
/********* @forward 로 파일들을 첨부한다. 파일 형식은 생략 가능 *********/
@forward "./normalize";
@forward "./reset";
@forward "./default";
_index.scss는 base폴더 뿐 아니라 여러 폴더 안에 한개씩 들어가있고,
해당 폴더 안에 들어있는 scss를 파일을 @forward로 모아주는 역할을 한다.
모듈을 사용하고 싶다면...
만약 sass파일 밖에서 base에 있는 Sass를 사용하고 싶다면, 다음과 같이 @use를 사용하면 된다.
/**** style.css ****/
@use "./base/index";
@use './layout/header';
@use './pages';
참고자료
https://blueshw.github.io/2019/10/27/scss-module-system/
[CSS] SCSS에 새로 추가된 Module System (@use, @forward)
이 글은 Introducing Sass Module)를 참고하여 정리하였다. 최근, SCSS(사스, Sass)에 모듈 시스템(Module System)을 지원하기 위한 새로운 feature들이 몇가지 승인(accepted)되었다. 그 중에 at-ru…
blueshw.github.io
http://www.webactually.co.kr/archives/13106
Sass 프로젝트를 위한 아키텍처 | Webactually Korea
예전의 단순했던 CSS만으로 일했던 그때를 기억하시나요? 사용한 CSS 파일은 단 하나지만 (코드의 줄은) 잠 못 이루는 밤보다 더 길었습니다. (대게 서툴게 작성된) 셀 수 없이 많은 줄과 거기서 알
www.webactually.co.kr