TIL 20일차

재활용

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@mixin large-text($size: 30px) {
    // @if($size < 30px) {
    //     font-size: 30px;    
    // } 
    // @else{
    //     font-size: $size;
    // }
    
    //condition ? true : false
    font-size: if($size < 30px, 30px, $size);
    font-weight: bold;
    font-family: sans-serif;
    color: blue;
}

.box-a {
    width: 100px;
    height: 200px;
    // 재사용가능
    @include large-text;
}

.box-b {
    width: 200px;
    @include large-text(40px);
}

.box-c {
    @include large-text(10px);
}

결과

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.box-a {
  width: 100px;
  height: 200px;
  font-size: 30px;
  font-weight: bold;
  font-family: sans-serif;
  color: blue;
}

.box-b {
  width: 200px;
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
  color: blue;
}

.box-c {
  font-size: 30px;
  font-weight: bold;
  font-family: sans-serif;
  color: blue;
}

• @mixin으로 함수를 선언한다 초기화 가능한 파라미터를 받을 수 있으며 사용시 @include를 선언하여 함수처럼 사용한다.
• if문을 사용할 수 있으며 선언시 @if, @else를 사용하여 선언한다.
• 삼항연산자를 사용할 수 있다. 속성 값에 해당하는 부분에 if(condition ? true : false) 작성하면 된다.
• 단순히 css 속성 값만 작성하는 것이 아니고 Scss에서 활용할 수 있는 다양한 규칙들을 @mixin에서 작성할 수 있다.
• @mixin내부에 @mixin을 선언하여 중첩할 수 있다.

• 1개의 파라미터를 받으려는데 많은 파라미터가 들어오게 된다면 $parms… 이렇게 restParameter로 받는다

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  @mixin spread($p,$t, $r, $b, $l){ #{$p}: { //보간처리 top: $t; right: $r; bottom: $b; left: $l }; } .box { //Lists $m: 10px 20px 30px 40px; @include spread(margin, $m...); @include spread(padding, $m...); }

  1 2 3 4 5 6 7 8 9 10 11

  /* 결과 */ .box { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }

• 함수를 동작 시킬 때 block도 같이 추가한다면 mixin안에 @content를 작성하면 @content에 block이 들어감
• Sass는 @mixin ⇒ = 이고 @include ⇒ +이다

확장

CSS에서 크기 모양은 같지만 색깔이 다른 버튼을 만들고 싶을 때 사용한다. 즉 다형성을 만들기 위한것이며 @extend를 사용한다.

특정한 선택자를 만들어서 가져와서 사용할 수 있음

하지만 중첩이 심하게 될 경우에 의도치 않게 상속하게 되는 상황이 발생하므로 웬만하면 mixin 규칙으로 사용하는것을 권장한다.

media에서 사용할 때는 media 내에 선언을 하고 써야된다.