장점

1. Nesting을 통해 코드 양을 줄이고 연관된 코드끼리 그룹핑해서 코드의 중복을 줄일수있다

2. 변수 선언 및 @mixin, @include, @extend(상속), @content, @if 등을 사용하여 유지보수에 용이.

3. 조건문, 반복문, 연산자 등 이용가능하다

4. map-get

*번외) 글꼴 2개이상 적혀있는건,
브라우저가 1번째 폰트를 지원안하면, 다음 차례에 있는 폰트를 시도하도록 코딩한것.
아하. 사용자마다 사용하는 브라우저가 다르니까 그런거군.

.underline-text {
          content: "";
          display: block;
          border-bottom: 3px solid $nav-bar-border-color;
          position: absolute;
          bottom: -9px;
          left: 0;
          width: 100%;
        }

        .link-text {
          @include breakpoint(md-only) {
            font-size: 15px;
          }

          &:hover:after {
            @extend .underline-text;
          }
        }

        .link-text--dropdown {

          &:after {
            @extend .underline-text;
          }
        }

CSS3 문법
::after 뒤쪽에 적용
::before 앞쪽에 적용
(:하나는 CSS2 문법)

$font: (
  primary: "Gothic",
  primary-bold: "GothicBold",
  secondary: "Myeongjo",
  secondary-bold: "MyeongjoBold",
  amp: (-apple-system, BlinkMacSystemFont, "Noto Sans KR", Roboto, "맑은 고딕","AppleSDGothicNeo-Regular", sans-serif),
) !default;

// !default; 의미 : 만약 변수에 대해서 아무런 값도 할당이 안되어있다면,
// (null 포함) 정의해 놓은 값으로 할당하라는 뜻.

 @include amp-include() {
    &--primary,
    &--primary b,
    &--primary-bold,
    &--secondary,
    &--secondary b,
    &--secondary-bold {
      font-family: map-get($font, amp);
    }
  }

@mixin breakpoint($point) {
  @if $point == sm {
    /* stylelint-disable-next-line */
    @media only screen and (max-width: map-get($breakpoint,sm)) {
      @content;
    }
  }

  @if $point == sm-only {
    /* stylelint-disable */
    @media only screen and (min-width: map-get($breakpoint,sm)) and (max-width: map-get($breakpoint,md) - 1) {
      @content;
    }
    /* stylelint-enable */
  }

  @if $point == md {
    /* stylelint-disable-next-line */
    @media only screen and (min-width: map-get($breakpoint,md)) {
      @content;
    }
  }

  @if $point == md-only {
    /* stylelint-disable */
    @media only screen and (min-width: map-get($breakpoint,md)) and (max-width: map-get($breakpoint,lg) - 1) {
      @content;
    }
    /* stylelint-enable */
  }

  @if $point == lg {
    /* stylelint-disable-next-line */
    @media only screen and (min-width: map-get($breakpoint,lg)) {
      @content;
    }
  }

  @if $point == lg-only {
    /* stylelint-disable */
    @media only screen and (min-width: map-get($breakpoint,lg)) and (max-width: map-get($breakpoint,xl) - 1) {
      @content;
    }
    /* stylelint-enable */
  }

  @if $point == xl {
    /* stylelint-disable-next-line */
    @media only screen and (min-width: map-get($breakpoint,xl)) {
      @content;
    }
  }
}

$breakpoint: (
  sm: 767px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
) !default;

&__basic {
    @include breakpoint(md) {
      padding-left: 0;
      padding-right: 0;
    }
  }