본문 바로가기

프로그램 강좌

[SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS


Extend(상속)

말 그대로 해석하면  인데, 기존 CSS를 그대로 가져와서 사용할 수 있는 기능으로, 약간 위험성이 있어 보여 잘 사용하진 않습니다.
기본형에 대해서는 지정할수는 있겠지만, 아무거나 다 연결시키면 꼬이기 시작합니다.
무작정 남발하지 말고 사용시 주의해야 합니다.

아래 예제를 보시고 한번 따라해보세요.


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);

.box1 {
  width: $variable * 20;
  height: $variable * 10;
  background: red;
  font-family: $font-stack;
}

.box2 {
  @extend .box1;
  background: blue;
}

실행은 되었지만, 많아지면 꼬일수도 있겠죠? 문어발로 연결시켜놨는데, 원본에 추가로 속성이 붙거나 사라진다면 다른 확장 클래스에도 영향을 미칩니다.

 


Mixin

제가 즐겨 쓰는 기능중에 하나입니다. 프로그램의 함수처럼 공식을 만들어 놓고, 필요할때마다 불러와서 속성을 대입할 수 있습니다.

아래 예제를 따라해보세요.


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);

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

.box1 {
  @include size(200px, 100px);
  background: red;
  font-family: $font-stack;
}

.box2 {
  @include size($variable * 30, 200px); //이런 형태도 가능합니다. SASS짱!
  background: blue;
  font-family: $font-stack;
}


결과 보시면 아시겠지만, 하나의 값이 아니라 속성 덩어리 형태로 만들어집니다. 아주 유용한 기능이죠.

읽어주셔서 감사드리고, 다음 강의에서 뵙겠습니다.

2019/07/11 - [프로그램 강좌] - [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/13 - [프로그램 강좌] - [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/17 - [프로그램 강좌] - [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/19 - [프로그램 강좌] - [SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS

2019/07/21 - [프로그램 강좌] - [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS


728x90