스타일링

2023-10-22
1min
SCSS

규칙


  • global style 파일을 최상단 layout 에서 import 해서 사용한다.
  • 각 폴더는 아래의 구조를 갖는다. 폴더의 스타일들은 _index.scss 에서 외부로 forwarding 해주는 방식을 취한다.
    • _index.scss
      • 스타일 파일을 forwarding 해준다.
    • _functions.scss
      • scss 의 function 정의되어있음
    • _data.scss
      • 변수 정의
    • _mixins.scss
      • data.scss 와 _functions.scss 에서 정의한 변수 / 함수를 이용해 mixin 을 정의
      • 외부에서는 주로 이 mixin 을 사용

구조


0. plugins

외부 패키지들의 스타일을 정의

  • mdx

1. base

기본적인 scss mixin 들을 선언.

  • pseudo
  • text ellipsis
  • hover
  • scroll bar

2. theme

블로그에 사용되는 color 및 light / dark theme


3. foundations

블로그 디자인 시스템 기초

  • layout
    • grid
  • shadow
  • shape
  • space
  • typography
  • skeleton

4. components

블로그에 사용되는 각종 컴포넌트 정의. 위에서 정의한 변수 / 믹스인을 최대한 이용해서 스타일 작성


5. page


styles file tree

sh
├── 0-plugins
│   ├── _index.scss
│   └── _mdx.scss
├── 1-base
│   ├── _functions.scss
│   ├── _index.scss
│   └── _mixins.scss
├── 2-theme
│   ├── _color.scss
│   ├── _css-variable.scss
│   ├── _dark.scss
│   ├── _index.scss
│   ├── _light.scss
│   ├── _utils.scss
│   └── colors
├── 3-foundations
│   ├── _index.scss
│   ├── layout
│   ├── shadow
│   ├── shape
│   ├── space
│   └── typography
├── 4-components
│   ├── _index.scss
│   ├── button
│   ├── documentTOC
│   ├── layout
│   ├── postCard
│   ├── simplePost
│   ├── skeleton
│   ├── tag
│   ├── themeSelector
│   └── typography
├── 5-page
│   ├── _index.scss
│   ├── guestbook
│   └── not-found
├── 6-utils
│   └── _index.scss
├── _index.scss
└── globals.scss
sh
├── 0-plugins
│   ├── _index.scss
│   └── _mdx.scss
├── 1-base
│   ├── _functions.scss
│   ├── _index.scss
│   └── _mixins.scss
├── 2-theme
│   ├── _color.scss
│   ├── _css-variable.scss
│   ├── _dark.scss
│   ├── _index.scss
│   ├── _light.scss
│   ├── _utils.scss
│   └── colors
├── 3-foundations
│   ├── _index.scss
│   ├── layout
│   ├── shadow
│   ├── shape
│   ├── space
│   └── typography
├── 4-components
│   ├── _index.scss
│   ├── button
│   ├── documentTOC
│   ├── layout
│   ├── postCard
│   ├── simplePost
│   ├── skeleton
│   ├── tag
│   ├── themeSelector
│   └── typography
├── 5-page
│   ├── _index.scss
│   ├── guestbook
│   └── not-found
├── 6-utils
│   └── _index.scss
├── _index.scss
└── globals.scss