scss 변수

$red-color: #ff0000;

h1 {
  background-color: $red-color;
}

scss 중첩

반복을 최소화

사용

.social {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 600px;
    display: flex;

    li {
        border: 1px solid #000;
        padding: 10px;
        flex: 1;
        text-align: center;

        a {
            color: #000;
            text-transform: uppercase;
        }
    }
}

&

scss 믹스인

재사용이 가능한 스타일을 정의

//예시
<section>
     <h1 class="font-large"><a>This is H1 Headline</a></h1>
     <h2 class="font-medium"><a>This is H2 Headline</a></h2>
     <h3 class="font-small"><a>This is H3 Headline</a></h3>
</section>

.font {
    &-large {
        color: crimson;
        text-transform: uppercase;
        a {
        font-size: 60px;
        }
    }

    &-medium {
        font-size: 40px;
        color: yellowgreen;
        text-transform: uppercase;
    }

    &-small {
        font-size: 20px;
        color: royalblue;
        text-transform: uppercase;
    }
}

선언

@mixin reusable-style {
  color: red;
  margin: 0;
}

사용

div {
  @include resuable-style;
}

인수

선언

@mixin mixin-with-args($props, $num) {
  #{$props}: $num;
}

사용

.box1 {
  @include mixin-with-args(width, 100px);
}

참고
https://velog.io/@bami/SCSS-SCSS-%EB%AC%B8%EB%B2%955-mixin-inclue