Mixin. 작성해 두면 두고두고 편하게.

flexbox

$flex-map: ( // 배열이라고 하나 이렇게 값을 펼쳐논다.  key : 값 형태.

  start: flex-start,

  end: flex-end,

  between: space-between,

  around: space-around,

  stretch: stretch,

  center: center,

);

 

@function _get-flex-value($key) { //입력한 키값($key)를 받아서

  @return map-get($flex-map, $key); // @return 리턴한다. 배열에서 입력한 키값에 맞는 값을.

}

 

@mixin flexbox($js: center, $ai: center) { // : 를 붙히고 값을 써준 것은 default값을 설정함

  display: flex;

  align-items: _get-flex-value($ai);

  justify-content: _get-flex-value($js);

}

 

@mixin inline-flexbox($js: center, $ai: center) {

  display: inline-flex;

  align-items: _get-flex-value($ai);

  justify-content: _get-flex-value($js);

}

 

@mixin column-flexbox($js: center, $ai: center) {

  display: flex;

  flex-direction: column;

  align-items: _get-flex-value($ai);

  justify-content: _get-flex-value($js);

}

 

체크포인트 -

1. 받아오는 값을 여러개 쓸수있고 받아오는 값이 없을 때 기본값을 설정할 수 있다.

2. function-return. return-map-get. 사용하는 방식.

3. property값으로 함수명이 들어갈 수 있다.

4. flex-map 배열형식으로 쓰는 방식.

responsive

@mixin responsive($screen) {

  @if ($screen == 'T') {

    @media screen and (min-width: $md-breakpoint) {

      @content;

    }

  }

  @if ($screen == 'D') {

    @media screen and (min-width: $lg-breakpoint) {

      @content;

    }

  }

}

 

체크포인트-

1. if문으로 경우에 따라 분기처리를 다르게 해주는 방식.

2. @content로 작성될 곳을 표시해주는 방식.

positions

@mixin pos-center-x($type: absolute) {

  @if ($type == fixed or $type == absolute) {

    position: $type;

    left: 50%;

    transform: translateX(-50%);

  }

}

 

@mixin pos-center-y($type: absolute) {

  @if ($type == fixed or $type == absolute) {

    position: $type;

    top: 50%;

    transform: translateY(-50%);

  }

}

 

@mixin pos-center($type) {

  @if ($type == fixed or $type == absolute) {

    position: $type;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

  }

}

 

체크포인트

1. if문으로 유효하지않은 값으로 position 값에 할당되는 것을 방지하는 방식.