# 4-Mixin

코알라코딩

●

scss

# 목차

1. 믹스인
- 1.1. 개요
- 1.2. 기본문법
- 1.3. 작성

# 1. 믹스인

공식문서-mixin

https://sass-lang.com/guide/#mixins

# 1.1. 개요

속성은 같은데 값이 다를때 이것을 하나의 코드블록으로 정의해서 재사용할수 있는것이 믹스인

# 1.2. 기본문법

@mixin 이름(매개변수) //생성
	@include 이름(인수); //사용

반복하는 모든 코드를 하나의 mixin에 몰아넣어서 사용하는 건 바른 mixin 사용법이 아님.

아래 코드처럼 스타일별로 나누어서 mixin을 만든 후 서로 연관 있는 스타일 속성끼리 묶어서 만들어야 좀 더 사용성이 높은 mixin을 만들 수 있다.

css

scss

.card {
	display: flex;
	justify-content: center;
	align-items: center;
	background: gray;
}

.aside {
	display: flex;
	justify-content: center;
	align-items: center;
	background: white;
}
/*.card와 .aside 클래스 선택자의 적용한 스타일이 겹침*/

// scss를 사용

@mixin center-xy {
	display: flex;
	justify-content: center;
	align-items: center;
}

.card {
	@include center-xy; // 정의한 center-xy mixin을 사용하여 코드 한줄이면 끝!
	background: gray;
}

.aside {
	@include center-xy;
	background: white;
}

# 1.3. 작성

실행화면

html문서의 css링크를 모두 주석처리한다.

basic.html
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>basic</title>
		<!--
		<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" />
	</head>

	<body>
		<header>
			<h1 id="logo"><a href="#">logo</a></h1>
			<nav>
				<ul>
					<li><a href="#">menu1</a></li>
					<li><a href="#">menu2</a></li>
					<li><a href="#">menu3</a></li>
				</ul>
			</nav>
			<button><a href="#">login</a></button>
			<form action="#">
				<select id="theme">
					<option value="light">Light</option>
					<option value="dark">Dark</option>
					<option value="mid">Mid</option>
				</select>
			</form>
		</header>
		<main>
			<section>
				<h2>section1</h2>
				<div class="section1-box">
					<div class="section1-item">
						<span class="section1-title">title</span>
						<span class="section1-para">paragraph</span>
					</div>
					<div class="section1-item">
						<span class="section1-title">title</span>
						<span class="section1-para">paragraph</span>
					</div>
					<div class="section1-item">
						<span class="section1-title">title</span>
						<span class="section1-para">paragraph</span>
					</div>
				</div>
			</section>
		</main>
	</body>
</html>

mixin을 작성한다.

scss/mixin.scss
@charset "utf-8";
@import url(./reset.css);
//$color: #333 인수에 기본값을 정의할수 있다.
@mixin fontSizeBgColor($fontSize, $bgColor, $color: #333) {
	color: $color;
	font-size: $fontSize;
	background-color: $bgColor;
}
@mixin hover($color, $deco: none) {
	color: $color;
	text-decoration: $deco;
	@content; //스타일 추가
}
@mixin flexDirectJustiAlign($direct: row, $justify: flex-end, $align: stretch) {
	display: flex;
	flex-direction: $direct;
	justify-content: $justify;
	align-items: $align;
	@content;
}

mixin을 적용한다.

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

scss/mixin.scss
header {
	@include flexDirectJustiAlign();
	padding: 2vw 4vw;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
	a {
		color: red;
	}
	& a {
		color: blue;
	}

	h1 {
		flex: 1 1 30%;
		& > a {
			@include fontSizeBgColor(2rem, #6ffaff, #0c08ff);
		}
		a:hover {
			@include hover(pink, underline){
				//@content 로 전달
				background:yellow;
			};
		}
	}

	nav {
		flex: 1 1 50%;
	}

	button {
		flex: 1 1 10%;
		a:hover {
			color: red;
		}
		&:hover a {
			@include fontSizeBgColor(2rem, yellow);
		}
	}
	ul {
		display: flex;
		width: 80%;
		& li {
			flex: 1 1 30%;
		}
		& ul {
			display: block;
		}
	}
}
main {
	padding: 2vw 4vw;
}
.section1 {
	&-box {
		background: #c9c9c9;
		max-width: 500px;
		margin: auto;
		@include flexDirectJustiAlign(column);
		border-radius: 8px;
		border: 4px solid #d5d5d5;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
	}
	&-box > &-item {
		width: 30%;
		@include flexDirectJustiAlign(row, space-between, center){
			gap: 50px; //@content
		};
		padding: 1vw;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
		border: 4px solid #6361e7;
	}
}

scss