[SCSS]프로젝트 SCSS 폴더 및 파일 구조 참고용

 

모바일에 최적화된 SCSS 구조를 설정하기 위해서는 프로젝트의 폴더 구조와 파일들을 체계적으로 관리하는 것이 중요합니다. 아래는 모바일 중심의 프로젝트에 적합한 SCSS 구조 예시입니다. 이 구조는 SCSS 파일들을 모듈화하여 유지보수가 쉽고, 확장 가능한 형태로 관리하는 것을 목표로 합니다.

 

반응형

 

프로젝트 폴더 구조 (vue.js 기준)

project-root/
├── src/
│   ├── assets/
│   │   ├── styles/
│   │   │   ├── abstracts/
│   │   │   │   ├── _variables.scss
│   │   │   │   ├── _mixins.scss
│   │   │   │   ├── _functions.scss
│   │   │   ├── base/
│   │   │   │   ├── _reset.scss
│   │   │   │   ├── _typography.scss
│   │   │   │   ├── _base.scss
│   │   │   ├── components/
│   │   │   │   ├── _buttons.scss
│   │   │   │   ├── _forms.scss
│   │   │   │   ├── _cards.scss
│   │   │   ├── layout/
│   │   │   │   ├── _header.scss
│   │   │   │   ├── _footer.scss
│   │   │   │   ├── _grid.scss
│   │   │   │   ├── _sidebar.scss
│   │   │   ├── pages/
│   │   │   │   ├── _home.scss
│   │   │   │   ├── _about.scss
│   │   │   │   ├── _contact.scss
│   │   │   ├── themes/
│   │   │   │   ├── _light.scss
│   │   │   │   ├── _dark.scss
│   │   │   ├── main.scss
│   ├── components/
│   │   ├── Header.vue
│   │   ├── Footer.vue
│   │   ├── Button.vue
│   │   ├── Card.vue
│   ├── views/
│   │   ├── Home.vue
│   │   ├── About.vue
│   │   ├── Contact.vue
│   ├── App.vue
│   ├── main.js
├── public/
│   ├── index.html
├── package.json
├── vue.config.js

 

어떤 언어를 사용하는지에 따라 차이는 있을 수 있겠지만, 보통 이미지와 (scss)css, script, images 구조는 위에서 크게 벗어나지 않습니다.

 

SCSS 파일 내용

abstracts/_variables.scss

변수들을 정의합니다. 색상, 폰트 크기, 스페이싱 등을 설정합니다.

// Colors
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-color: #333;

// Font sizes
$base-font-size: 1.6rem; // 16px
$small-font-size: 1.4rem; // 14px
$large-font-size: 2rem; // 20px

// Spacing
$base-spacing: 1.5rem; // 15px
$small-spacing: 1rem; // 10px
$large-spacing: 2rem; // 20px

 

abstracts/_mixins.scss

자주 사용하는 믹스인을 정의합니다.

@mixin font-size($size) {
  font-size: $size / 10 * 1rem;
}

@mixin spacing($property, $size) {
  #{$property}: $size / 10 * 1rem;
}

@mixin respond-to($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == medium {
    @media (max-width: 900px) { @content; }
  } @else if $breakpoint == large {
    @media (max-width: 1200px) { @content; }
  }
}

 

base/_reset.scss

CSS 초기화를 위한 설정을 정의합니다.

/* A modern CSS reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

 

base/_typography.scss

기본 타이포그래피 설정을 정의합니다.

body {
  font-size: $base-font-size;
  color: $font-color;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: $base-spacing;
  line-height: 1.2;
}

p {
  margin-bottom: $base-spacing;
}

 

components/_buttons.scss

버튼 스타일을 정의합니다.

.button {
  display: inline-block;
  padding: $small-spacing $large-spacing;
  background-color: $primary-color;
  color: #fff;
  text-align: center;
  border-radius: 0.3rem;
  text-decoration: none;
  font-size: $base-font-size;
  transition: background-color 0.3s;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

 

main.scss

모든 SCSS 파일을 임포트하여 하나의 스타일 시트로 결합합니다.

// Abstracts
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'abstracts/functions';

// Base styles
@import 'base/reset';
@import 'base/typography';
@import 'base/base';

// Layout
@import 'layout/header';
@import 'layout/footer';
@import 'layout/grid';
@import 'layout/sidebar';

// Components
@import 'components/buttons';
@import 'components/forms';
@import 'components/cards';

// Pages
@import 'pages/home';
@import 'pages/about';
@import 'pages/contact';

// Themes
@import 'themes/light';
@import 'themes/dark';

 

이러한 구조를 사용하면 스타일을 체계적으로 관리하고, 필요한 스타일을 쉽게 찾고 수정할 수 있습니다. 필요한 경우 각 파일과 폴더를 추가하거나 수정하여 프로젝트에 맞게 조정할 수 있습니다.

 

프로젝트 규모에 따라 구조의 차이는 있을 수 있습니다.

참고만하세요~