# 6-Partials

코알라코딩

●

scss

# 목차

1. 개요
2. 작성
- 2.1. html
- 2.2. base/_base.scss
- 2.3. mixin/_mixin.scss
- 2.4. mixin/_extend.scss
- 2.5. scss/partial.scss

# 목차

scss partials

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

# 1. 개요

자주 사용되는 scss 코드를 모아둔 파일로 파일.

파일명은 언더스코어 _ 로 시작한다.

_ 로 시작하는 파일명은 컴파일 되지 않는다.

# 2. 작성

실행화면

아래와 같이 폴더와 파일을 생성한다. 이때 파일명 앞에 _를 붙여야 한다.

scss(root)/
	├─ base/
	│	└─ _base.scss
	└─ mixin/
	 	├─ _extend.scss
	 	└─ _mixin.scss

# 2.1. html

basic.html 을 아래와 같이 수정한다.

basic.html
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>basic</title>
	<link rel="stylesheet" href="css/partial.css" />
</head>

# 2.2. base/_base.scss

아래와 같이 작성한다.

base/_base.scss
@charset "utf-8";
@import url(./reset.css);
$bg-color: #ff0;
$color-red: #ff0000;
$col1: 8rem;
$gu1: 20rem;
$per20: 20%;

body {
	background: #f5f5ee;
}

화면은 변경되나 css 폴더에 base/base 파일은 생성되지 않는다

# 2.3. mixin/_mixin.scss

기존에 작성한 파일의 이름을 변경후 mixin 폴더로 이동한다.

mixin/_mixin.scss
@mixin fontSizeBgColor($fontSize, $bgColor, $color: #333) {
	color: $color;
	font-size: $fontSize;
	background-color: $bgColor;
}
@mixin hover($color, $deco: none) {
	color: $color;
	text-decoration: $deco;
}
@mixin flexDirectJustiAlign($direct: row, $justify: flex-end, $align: stretch) {
	display: flex;
	flex-direction: $direct;
	justify-content: $justify;
	align-items: $align;
}

# 2.4. mixin/_extend.scss

mixin/_extend.scss
%colorSize {
	color: #ac5040;
	font-size: 24px;
}

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

# 2.5. scss/partial.scss

root 폴더에 partial.scss 파일을 생성하고 모듈화 된 scss 파일을 임포트한다.

@import 'base/base';
@import 'mixin/mixin';
@import 'partial/extend';
header {
	@extend %padding;
	@include flexDirectJustiAlign(row, space-between, center);
	h1 {
		@include fontSizeBgColor(2rem, #6ffaff, #0c08ff);
	}
	nav ul {
		@include flexDirectJustiAlign(row, space-between, center);
		& > li {
			width: $col1;
		}
	}
}
main {
	@extend %padding;
}
.section1 {
	&-box {
		@extend %boxshadow;
		width: $col1 * 10;
		margin: auto;
		@include flexDirectJustiAlign();
	}
	&-item {
		flex: 1 1 0;
		@include flexDirectJustiAlign(column);
		@include fontSizeBgColor(2rem, #d8d8d8, $color-red);
		@extend %padding;
		span:nth-child(1) {
			@extend %colorSize;
		}
	}
}

scss