22.07.26 TIL - CSS 변경자

<template>
<div class="content-welcome">
        <span class="label-sm"> 안녕하세요<br /></span>
        <span class="label">
          오늘 나의 <span class="label label--blue">인간</span>과<br />
          <span class="label label--purple">멍뭉이</span>를 알아볼까요?
        </span>
      </div>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'PageMain'
})
</script>

<style lang="scss" scoped>
@import "src/css/app.scss";
.content-welcome {
    padding-top: 10.4vw;

    .label-sm {
      @include font-gmarket;
      @include h4;
    }
    .label {
      @include font-gmarket-bold;
      @include h1;
    }
    .label--blue {
      color: #199df0;
    }
    .label--purple {
      color: #6378ed;
    }
  }
</style>

 

BEM 규칙을 따라

블록__요소--변경자 로 구성.

 

내가 원했던 것은,

class="label"로 명명한 부분의 글자크기와 폰트를 최대한 재사용하고 싶었음.

이럴 땐 변경자를 활용해주면 좋다.

 

단, 변경자 클래스를 선언할 때 default가 되는 클래스 이름을 꼭 같이 써줘야 함.

ex) label이 default고

      label--blue와 label--purple에 폰트, 글자 크기를 전달하고 싶을 경우

      label--blue와 label--purple 클래스 명에 label을 같이 써주면 됨.

     class="label label--blue"