[CSS/SCSS] sass 7-1 pattern

roses16·2023년 2월 16일
0

7-1은 7개의 폴더와 1개의 파일을 말한다.

CSS전처리기를 통해 코드 베이스를 여러 파일로 분할하여 사용할 때 프로젝트에서 사용되는 다수의 스타일 파일을 7개의 폴더(abstracts, vendeors, base, layout, components, pages, themes)로 관리하고 이를 1개의 파일에 import하여 사용하는 방식이다.

각각의 폴더는 아래와 같은 내용을 담는다.

  • abstracts
    프로젝트 전체에서 사용하는 도구들을 담고 있다.
    _variables.scss, _mixins.scss, _functions.scss, _placeholders.scss

  • vendors
    외부 라이브러리 및 프레임워크의 CSS를 담는다. 외부 파일을 재정의해야하는 경우 vendors-extensions라는 폴더를 따로 생성하여 관리하는 것을 권장하고 있다.
    _bootstrap.scss, _jquery-ui.scss, _select2.scs

  • base
    프로젝트의 전반적으로 사용될 디폴트 스타일, 폰트 등 공용 스타일을 담는다.
    _base.scss, _reset.scss, _typography.scss, _animations.scss

  • layout
    사이트 구조/레이아웃을 담는다.
    _grid.scss, _header.scss, footer.scss, _sidebar.scss, _forms.scss

  • components
    layout보다 작은 구성요소들을 담는다.
    _buttons.scss, _media.scss, _thumbnails.scss

  • pages
    각 페이지 고유의 스타일을 담는다. 일반적으로 파일명은 페이지 이름과 동일하게 설정한다.
    _home.scss, _contact.scss

  • themes
    테마를 설정할 수 있는 웹의 경우 테마와 관련된 스타일을 담는다.
    _theme.scss, _admin.scss

위와같이 분류한 스타일 시트들은 1개의 파일에 모아 사용한다.
일반적으로 main.scss의 파일명을 사용하는 편이나 변경해도 관계없다.
해당 파일은 아래 예시와 같이 단순히 import만을 담당하며, CSS는 순서에 의존하므로 아래와 같이 import의 순서를 통일하여 사용한다.

// main.scss

@import
  'abstracts/variables',
  'abstracts/functions',
  'abstracts/mixins',
  'abstracts/placeholders';

@import
  'vendors/bootstrap',
  'vendors/jquery-ui';

@import
  'base/reset',
  'base/typography';

@import
  'layout/navigation',
  'layout/grid',
  'layout/header',
  'layout/footer',
  'layout/sidebar',
  'layout/forms';

@import
  'components/buttons',
  'components/carousel',
  'components/cover',
  'components/dropdown';

@import
  'pages/home',
  'pages/contact';

@import
  'themes/theme',
  'themes/admin';
// main.scss

@import 'abstracts/*';
@import 'vendors/*';
@import 'base/*';
@import 'layout/*';
@import 'components/*';
@import 'pages/*';
@import 'themes/*';

📌 참조

profile
frontend developer 📚

0개의 댓글