[React 따라하기 #16] React sass @extend

sass @extend

 

extend 는 기존에 정의한 스타일을 그대로 사용할 때 씁니다.

예제 sass

/* 이미 정의된 스타일을 */
.tab-default {
  padding: 10px;
  text-align: center;
  text-weight: bold;
}

.tab-select {
  @extend .tab-default;  /* @extend 로 그대로 가져다가 씀 */
  color: red;
}

.tab-unselect {
  @extend .tab-default;  /* @extend 로 그대로 가져다가 씀 */
  color: gray;
}

컴파일 후에 css 는 아래와 같이 나옵니다.

.tab-default, .tab-select, .tab-unselect {
  padding: 10px;
  text-align: center;
  text-weight: bold;
}

.tab-select {
  color: red;
}

.tab-unselect {
  color: gray;
}

 

왜 이렇게 쓰냐면?

extend 를 안하면 <button class="tab-default tab-select"> 이렇게 써야합니다..

extend 하면 <button class="tab-select"> 이렇게 짧아지...

뭐 좀더 유용한 상황이 있겠...

 

 

 

2019/12/27 - [HTML,Javascript] - [React 따라하기 #1] React 개발에 필요한 도구 설치

2019/12/30 - [HTML,Javascript] - [React 따라하기 #2] React 시작하기 hello world!

2019/12/30 - [HTML,Javascript] - [React 따라하기 #3] Codepen에서 실행해보기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

2019/12/30 - [HTML,Javascript] - [React 따라하기 #5] React JSX

2019/12/30 - [HTML,Javascript] - [React 따라하기 #6] React Components(컴포넌트)

2019/12/30 - [HTML,Javascript] - [React 따라하기 #7] React Components(컴포넌트) 참조하기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #8] React Props

2019/12/31 - [HTML,Javascript] - [React 따라하기 #9] React State

2020/01/02 - [HTML,Javascript] - [React 따라하기 #10] React 기본 함수 (life cycle)

2020/01/02 - [HTML,Javascript] - [React 따라하기 #11] React Event 리액트 이벤트

2020/01/02 - [HTML,Javascript] - [React 따라하기 #12] React Form

2020/01/03 - [HTML,Javascript] - [React 따라하기 #13] React 에서 css 적용하기

2020/01/03 - [HTML,Javascript] - [React 따라하기 #14] React sass

2020/01/03 - [HTML,Javascript] - [React 따라하기 #15] React sass @mixin