Function
mixin 과 상당히 비슷하긴 합니다.
하지만, mixin은 속성 전체를 반환하고 Function은 값을 반환합니다.
저도 mixin은 많이 사용했는데, function은 별로 안써봤네요.
아래 예제를 보시면 이해가 빠르실거예요.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Link href="css/style.css" rel="stylesheet" />
<title>scss연습</title>
</head>
<body>
<div class="box1">박스1 입니다.</div>
<div class="box2">박스2 입니다.</div>
</body>
</html>
css/style.scss
$variable: 10px;
$font-stack: ('Helvetica', 'Arial', sans-serif);
@function wdt-percent($width) {
@return $width * 1%;
}
.box1 {
width: wdt-percent(20); //20%
height: 200px;
background: red;
font-family: $font-stack;
}
.box2 {
width: wdt-percent(50); //50%
height: 200px;
background: blue;
font-family: $font-stack;
}
가장 큰 차이는 결과값의 차이입니다.
mixin은 구조 자체로 만들어지고 function은 어떤 값으로 만들어집니다.
placeholder
% 선택자를 사용하면 상속(Extend) 할 수는 있지만 해당 선택자는 컴파일 되진 않습니다.
오로지 상속을 위한 용도로만 사용할 수 있다는 말입니다.
아래 예제를 보시기 바랍니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Link href="css/style.css" rel="stylesheet" />
<title>scss연습</title>
</head>
<body>
<div class="box1">박스1 입니다.</div>
<div class="box2">박스2 입니다.</div>
</body>
</html>
css/style.scss
$variable: 10px;
$font-stack: ('Helvetica', 'Arial', sans-serif);
%box {
width: $variable * 20;
height: 200px;
background: red;
font-family: $font-stack;
}
.box1 {
@extend %box;
background: green;
}
.box2 {
@extend %box;
background: blue;
}
위 예제 따라해보시면 아시겠지만 %box는 css 결과로는 만들어지지 않는 클래스입니다.
대신 실제 제작되는 모든 클래스에 연산시 관여하죠.
읽어주셔서 감사드리며, 다음 강의에서 뵙겠습니다.
2019/07/11 - [프로그램 강좌] - [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/13 - [프로그램 강좌] - [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/15 - [프로그램 강좌] - [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/19 - [프로그램 강좌] - [SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/21 - [프로그램 강좌] - [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
'프로그램 강좌' 카테고리의 다른 글
| [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.21 |
|---|---|
| [SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.19 |
| [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.15 |
| [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.13 |
| [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.11 |
