creative
SASS
2019.09.19 21:25

Sass @extend

조회 수 61 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

Sass @extend

@extend 지시문을 사용하면 한 선택자에서 다른 선택자로 일련의 CSS 속성을 공유 할 수 있습니다.

@extend 지시문은 작은 세부 사항 만 다른 거의 동일한 스타일의 요소가 있는 경우 유용합니다.

 


 

다음 Sass 예제는 먼저 버튼의 기본 스타일을 만듭니다 (이 스타일은 대부분의 버튼에 사용됨).

그런 다음 "보고서"버튼에 대한 스타일 하나와 "제출"버튼에 대한 스타일 하나를 만듭니다.

"보고서"및 "제출"버튼은 모두 @extend 지시문을 통해 .button-basic 클래스의 모든 CSS 속성을 상속합니다.

또한 자체 색상이 정의되어 있습니다.

 

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

 

출력결과

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

 

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 SASS Sass @while 2019.09.20 37
40 SASS Sass @for 2019.09.20 25
39 SASS Sass @each 2019.09.20 20
38 SASS Sass @if and @else 2019.09.20 12
37 SASS Sass Operators 2019.09.20 12
36 SASS Sass Introspection Functions 2019.09.19 36
35 SASS Sass Color Functions 2019.09.19 25
34 SASS Sass Selector Functions 2019.09.19 23
33 SASS Sass Map Functions 2019.09.19 57
32 SASS Sass List Functions 2019.09.19 49
31 SASS Sass Numeric Functions 2019.09.19 50
30 SASS Sass String Functions 2019.09.19 63
» SASS Sass @extend 2019.09.19 61
28 SASS Sass @mixin과 @include 2019.09.19 88
27 SASS Sass @import 2019.09.19 68
26 SASS Sass 중첩 규칙과 속성 2019.09.19 37
25 SASS Sass 변수 2019.09.19 46
24 SASS Sass 소개 2019.09.19 94
23 SASS SASS 샘플 2019.08.16 67
22 HTML ::after ::before 토글 사용 예제 2019.06.28 125
Board Pagination Prev 1 2 3 Next
/ 3

Menu