본문 바로가기

프로그램 강좌

[SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS


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


728x90