fixed()

고정(Fixed) 위치 설정 믹스인

용도

고정 위치(fixed position) 레이아웃을 위한 개별 속성을 빠르게 설정할 때 사용하는 믹스인입니다.

사용법

fixed() 믹스인에 설정 가능한 키:값을 리스트로 전달합니다.

fixed($args:list)

.usage {
  @include fixed(t 0 l 0 r 0 z 1500);
}

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$args

list

null

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.usage {
  position: fixed;
  z-index: 1500;
  top: 0;
  left: 0;
  right: 0;
}

믹스인에 설정 가능한 속성 키워드 및 값 유형

속성 키워드

값 유형

컴파일 속성

top 또는 t

number, number(unitless), string

top

right 또는 r

number, number(unitless), string

right

bottom 또는 b

number, number(unitless), string

bottom

left 또는 l

number, number(unitless), string

left

z-index 또는 z

number

z-index

로직

fixed() 믹스인은 다음의 로직에 의해 작성되었습니다.

@mixin fixed($args: null) {
  @include position(fixed, $args);
}
  1. 고정(fixed) 위치 설정

  2. 전달 받은 인자 $args가 있을 경우, 리스트 분석 후 개별 속성 설정

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

Last updated