rustandbone Developer

SASS(2)

20 Jun 2023

230620 화 회고

인트로
SASS를 배우는 시간은 이번 주 월요일부터 목요일까지 뿐이다. 본격적으로 들어가면서, 같이 듣는 학생들 중 상당수가 어려워했다. 왜 그럴까 생각해보니 실행 구조가 아직 잡히지 않아서 그런 듯 했다. 그야말로 부품(컴포넌트)를 만들고 끼어넣고 사용하면 되는데, 이게 익숙하지 않았나 보다. 회고 담당 발표 차례가 아니긴 하지만, 지난주부터 정리 시작한 겸 오늘도 실행 구조에 집중해서 회고를 작성해보았다. 오늘 회고 담당한 분 이후에, 양해를 구하고 팀원 분들께 설명까지 할 수 있었다.
오늘 많은 걸 했지만, 그 많은 게 [생성], [끼어넣기], [사용] 이 세 가지로 분류가 된다. 내가 무엇을 하고 있는 건지 의식하면서 코딩하면 익숙해지는데 도움이 될 듯 하다.

SASS

부품 생성 - scss 파일 생성

  1. mixin
  2. function
  3. 클래스, 태그 등
  • mixin
/* media-query */
$break: 768px;

@mixin mobile {
  @media (max-width: #{$break - 1}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$break}) {
    @content;
  }
}

/* mixin */
@mixin autoMargin {
  margin-left: auto;
  margin-right: auto;
}

@mixin containerMax($max-width: 1024px) {
  max-width: rem($max-width);
  @include autoMargin;
}
  • function
@use "sass:math";

/* 루트 요소 기본 단위  */
$rootUnit: 16px !default;

/* 단위 제거 함수  */
@function removeUnit($value) {
  @return math.div($value, $value * 0 + 1);
}

/* px을 rem 단위로 변경하는 함수 */
@function rem($value, $base: $rootUnit) {
  $removeValue: removeUnit($value);
  $removeBase: removeUnit($base);
  @return math.div($removeValue, $removeBase) * 1rem;
}
  • 클래스, 태그 등
/* 햄버거 버튼 */
.button--burger {
  @include mobile {
    width: rem(36px);
    height: rem(36px);
    background: blue;
    border: 0;
    padding: 0;
    @include pos;
    top: rem(65px);
    right: rem(20px);

    &BarTop,
    &BarMiddle,
    &BarBottom {
      background: $white;
      width: 100%;
      height: 20%;
      border-radius: rem(10px);
      left: 0;
    }

    &BarTop {
      @include posLeftTop;
    }

    &BarMiddle {
      @include posCenterY;
    }

    &BarBottom {
      @include posBottomY;
    }
  }

  @include desktop {
    display: none;
  }
}

/* 숨김 콘텐츠  */
.a11yHidden,
legend {
  @include a11yHidden();
}

부품 끼어넣기 - _index에 @forward, scss 파일에서 @use

/* index.scss */
@use "base";
@use "layout";

/* layout/_index.scss */
@forward "header";
@forward "navigation";
@forward "layout";
@forward "footer";

/* _header.scss */
@use "./../utils" as *;
@use "./../components" as *;

/* _mixin.scss */
@use "./../utils/unit" as *;

부품 사용 - @include, 변수, 함수(ex. rem())

  • @include
  • 변수
  • 함수
@use "./../utils" as *;
@use "./../components" as *;

.appHeader {
  padding: rem(16px) rem(24px);
  @include flexbox(column);
  gap: rem(16px);

  @include mobile {
    background: $dark-brown;
    color: $white;
  }

  @include desktop {
    position: relative;
    max-width: 1024px;
    @include containerMax;
  }
}

-클래스, 태그 사용

Related posts