# 5-Extend

코알라코딩

●

scss

# 목차

1. 익스텐드
- 1.1. 기본문법
- 1.2. 작성

# 1. 익스텐드

공식문서-extend

https://sass-lang.com/guide/#extend-inheritance

완전히 같은 코드를 묶어서 재사용 함

# 1.1. 기본문법

//선언
%message-shared {
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
}

.message {
	//적용
	@extend %message-shared;
}

.success {
	@extend %message-shared;
	border-color: green;
}

# 1.2. 작성

실행화면

html의 css 링크는 mixin.css와 extend.css 만 적용한다.

basic.html
<!-- 		<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/var.css" />
<link rel="stylesheet" href="css/nesting.css" /> -->
<link rel="stylesheet" href="css/mixin.css" />
<link rel="stylesheet" href="css/extend.css" />

extend 선언시에는 % 키워드를 사용한다.

scss/extend.scss
@charset "utf-8";
@import url(./reset.css);
...생략

%colorSize {
	color: #ac5040;
	font-size: 24px;
}

%boxshadow {
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
%padding {
	padding: 2vw 4vw;
}

extend 적용시에는 @extend 키워드를 사용한다.

scss/extend.scss
...생략
header {
	@extend %padding;
	@extend %boxshadow;
...생략
}//header
main {
	@extend %padding;
}
.section1 {
	&-box {
		background: #c9c9c9;
		max-width: 80%;
		margin: auto;
		@include flexDirectJustiAlign(column);
		border-radius: 8px;
		border: 4px solid #d5d5d5;
		@extend %boxshadow;

		&-item {
			width: 30%;
			@include flexDirectJustiAlign(row, space-between, center);
			@extend %padding;
			@extend %boxshadow;
			border: 4px solid #6361e7;
		}
	}

	&-box > &-item > &-title {
		@extend %colorSize;
	}
	&-box > &-item > &-para {
		@extend %colorSize;
	}
}

scss