Sass의 파일 구성(node-sass)

내가 사용한 파일의 구성을 기록합니다.
가능하면 참고해주세요.

- sass
  ├ base
  │ ├ _base.scss
  │ └ _reset.scss
  ├ function
  │ ├ _convert-rem.scss
  │ ├ _convert-vw.scss
  │ ├ _mediaquery.scss
  │ └ _strip-unit.scss
  ├ setting
  │ ├ _breakpoints.scss
  │ ├ _color.scss
  │ ├ _zindex.scss
  │ └ _typography.scss
  ├ layout
  ├ object
  │ ├ components
  │ ├ projects
  │ └ utility
  ├ plugin
  └ index.scss
  

base

초기 설정 파일을 넣습니다.
_reset.scss를 재설정하고 CSS에 가입합니다.
_base.scss는 각 항목에 기재하고자 하는 기초 CSS가 있으면 가입합니다.
CSS 리셋 여기 있습니다.
https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css

function

mixin 함수를 정의하는 폴더가 됩니다.
함수를 사용하면 다른 사람이 유지할 때 읽지 않으면 이해할 수 없기 때문에 보수적인 관점에서 최소한으로 통제한다.
저는 다음 4개를 사용했어요.
px를rem로 변환
_convert-rem.scss

@function rem($pixels) {
  @return $pixels / 16 * 1rem;
}

나는 px가 아니라rem로 기술한 d로 이 함수를 매우 자주 사용한다.
기본적으로 px가 아니라rem()의 형식으로 수치를 기술하는 형식입니다.
참고 자료
https://zenn.dev/tak_dcxi/articles/26280e7607bcd2
px를 vw로 변환
_convert-vw.scss

@function vw($size, $viewport: 375) {
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

미디어 쿼리 설명 (미디어 쿼리의 변수는 따로 정의됨)
_mediaquery.scss

@mixin mq($mediaquery: md) {
  @media #{map-get($mediaquerys, $mediaquery)} {
    @content;
  }
}

단위 삭제, 수치만 꺼내기
_strip-unit.scss

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

setting

변수를 정의하는 폴더입니다.
폭발점, 미디어 조회 변수
_mediaquery.scss

$breakpoints: (
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
);

$mediaquerys: (
  sm: "screen and (min-width: #{map-get($breakpoints,'sm')}px)",
  md: "screen and (min-width: #{map-get($breakpoints,'md')}px)",
  lg: "screen and (min-width: #{map-get($breakpoints,'lg')}px)",
  xl: "screen snd (min-width: #{map-get($breakpoints,'xl')}px)",
  ie: "(-ms-high-contrast: active), (-ms-high-contrast: none)",
);

돌파점은 Tailwind를 참고하여 결정했습니다.
색상 변수
_color.scss

// 汎用色
$pallette-black: #000;
$pallette-white: #fff;

// テーマカラー
$primary-main: ;
$primary-lighter: ;
$primary-darker: ;
$secondry-main: ;
$secondary-lighter: ;
$secondary-darker: ;

// その他
$bg-main:;
$text-black:;

색의 변수는 특별한 규정이 없지만 상술한 정의를 바탕으로 빈번하게 나타나는 색이다.
자주 사용하지 않는 색, 특히 변수에서 직접 지정하는 경우도 많다.
z-idex 변수
_zindex.scss

$layer: (
  modal: 100,
  drawer: 50,
  floating: 40,
  header: 30,
  footer: 20,
  front: 10,
  defalt: 1,
  background: -10,
);

z-idex는 변수 관리를 통과하지 않으면 혼돈이 되기 때문에 기본 구성 요소에서 z-idex를 관리합니다.
z-idex를 조정할 때 상기 변수를 기준defalt + 1으로 가감 관리를 한다.
글꼴 변수
_typography.scss

// フォントファミリー
$base-font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo, serif;

body {
  font-family: $base-font-family;
}

// フォントウェイト
$thin: 100;
$extralight: 200;
$regular: 300;
$normal: 400;
$medium: 500;
$semibold: 600;
$bold: 700;

기본 글꼴 패밀리는 가변화되어 body로 지정됩니다.
글꼴 무게는 Tailwind를 참조하여 변수화합니다.(필요 없을 것 같아서 연구가 필요해)

layout

Flocss의layout 요소가 여기에 들어갑니다.

object

components

가장 작은 단위이며 공통화될 수 있는 구성 요소가 여기에 있습니다.
기본적으로 단추, 제목, 목록 요소 등
카드 등 비최소 단위나 통용되지 않는 최소 단위가 프로젝트에 들어갑니다.

projects

layout,components 이외의 요소는 모두 여기에 들어갑니다.

utility

컴퓨터와 스마트폰 디스플레이display:none; 전환, 명나라체 전환 등을 utility로 진행했다.

plugin

외부 프로그램 라이브러리에서 사용하는 CSS는 여기에 두고 사용합니다.

index.scss

모든 변수를 읽고 파일로 출력합니다.