1. EXTEND
mixin 유연하게 css를 변환하는 반면 extend는 말그대로 그대로 옮겨다가 쓰는 용도이다. html 부터 먼저 만들자. log in 링크와 log out 버튼의 스타일을 같게 만들려고 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/css/reset.css" />
<link rel="stylesheet" href="dist/css/styles.css" />
<title>(S)CSS Masterclass</title>
</head>
<body>
<a href="#">log In</a>
<button>Log Out</button>
</body>
</html>
그리고 _buttons.scss 라는 파일을 만들어 주자. extend를 만들때는 % 기호를 이용한다. 그럼 아래처럼 많은 기능을 한꺼번에 감싼 패키지같은걸 만들게 되는 셈이다.
1
2
3
4
5
6
7
8
9
10
11
12
%button {
font-family: Georgia, "Times New Roman", Times, serif;
border-radius: 7px;
text-decoration: none;
text-transform: uppercase;
background-color: powderblue;
color: white;
font-weight: 500;
padding: 5px 10px;
}
// extend를 쓰고 싶을때는 퍼센테이지 바로 옆에 함수의 이름이 있어야 한다.
그리고 import 해주자. @ 통해서 extend를 불러오고 아래에 새로운 css property를 추가 할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@import "_buttons";
a {
@extend %button;
text-decoration: none;
}
button {
@extend %button;
border: none;
}
// extend 함수는 minxins 과는 다르게 똑같은 함수를 가볍게 적용할 수 있다.
// minxins은 인자와 조건에 따라 유연하게 바뀌는 측면에서, 그리고 독립적으로 적용할 수 있다는 점에서 extend와 차이가 있다.
결과
