rustandbone Developer

SASS(3), git

21 Jun 2023

230621 수 회고

인트로
SASS를 배우는 마지막 시간. 지난번에 CSS로 구현했던 것들을 SASS로는 어떻게 하는지 진행 중이다. 사용법은 당연히 어제 올린 포스트랑 같고 추가적인 문법을 정리해보았다. 그리고 금요일부터 html, css 프로젝트를 시작한다. 팀 프로젝트 시작에 앞서 git으로 어떻게 협력할 것인지 배워보았다.

Sass

sass map

@use "sass:map";

// Breakpoints
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

@mixin respond-range($from, $until) {
  @if map.has-key($breakpoints, $from) and map.has-key($breakpoints, $until) {
    $from-value: map.get($breakpoints, $from);
    $until-value: map.get($breakpoints, $until);

    @media (min-width: $from-value) and (max-width: ($until-value - 1)) {
      @content;
    }
  } @else {
    @if (map.has-key($breakpoints, $from) == false) {
      @error errorMessage($from);
    }

    @if (map.has-key($breakpoints, $until) == false) {
      @error errorMessage($until);
    }
  }
}

@at-root

@include desktop {
  @at-root .menu_list {
    background: $brown;
  }
}

@each

$colors: (
  "Book": var.$green,
  "News": var.$yellow,
  "Board": var.$brown,
  "Favorite": var.$orange,
  "Twitter": var.$blue,
);

@each $section, $color in $colors {
  .accent#{$section} {
    color: $color;
  }
}

.sprite {
  min-height: rem(60px);
  background-image: url(./../assets/images/sprite_main.png);
  background-repeat: no-repeat;
  padding-left: rem(64px);

  $sprites: Book, Board, News, Favorite, Twitter;
  $x: 0;
  $y: 0;
  @each $sprite in $sprites {
    &#{$sprite} {
      background-position: $x $y;
    }
    $y: $y - 115px;
  }
}

sass list

git

  1. 메인 브랜치 역할 하는 develop 브랜치 생성
  2. develop에서 각자 맡은 대로 작업 브랜치 생성
  3. 각자 작업 후 수정 사항 커밋 및 푸시 및 풀 리퀘스트
  4. 마스터 - 확인 후 작업 반영
  5. 팀원들 - develop 브랜치를 pull로 가져와 최신으로 만들기
  6. 다시 작업… 반복

주의 사항

  • 공동의 파일은 한 사람이 관리(충돌 방지)
    => 수정 필요한 경우 담당한 사람에게 연락 후 그 사람이 수정
    => 타인이 맡은 파일 ‘괜히’ 건들지 말기
  • pull 하는 건 하루에 한 번씩 다같이 하는 것을 권장
  • 작업할 때 어느 브랜치에서 작업하는지 반드시 ‘확인’해야 함
<!-- 마스터 할 일 -->
git branch develop //브랜치 생성
git switch develop //브랜치 이동
git push origin develop //develop 브랜치를 origin으로 push

<!-- 팀원 -->
<!-- push -->
git remote update //브랜치 업데이트(새로 만든 develop 브랜치 가져오기 위해)
git checkout -t ssam/develop //개발 본부 브랜치로 이동
git branch header //header 브랜치 생성
git switch header //이동 => 작업

npm run sass
git add .
git commit -m "..." //수정 사항 커밋

git push origin header //본인 브랜치에 push
pull request //깃허브에서 master에게 반영 요청

<!-- pull -->
git switch develop //이동
git pull ssam develop //원격 ssam의 자료들을 로컬 develop 브랜치로 가져옴

<!-- merge -->
git switch header //이동
git merge develop //header 브랜치와 develop 브랜치 merge
//conflict 해결 후 다시 commit 및 push

git push <원격 저장소 명> <branch명>
git pull <원격 저장소 명> <branch명>

Related posts