IT 정보공간 - front-end & publisher

sticky vs fixed

fixed : 스크롤을 해도 해당 위치에 위치한다

position:fixed;
bottom:0;

위 처럼 적용시 처음에 로드시 bottom :0 에 붙지만, 스크롤을 영향을 받지 않아서,
스크롤을 내리면 fixed 인데도 위에 붙어 있는 현상이 된다.

sticky : 스크롤에 따라 위치한다

position:sticky;
bottom:0;

위 처럼 적용 시 fixed 와 달리 스크롤을 내릴때도 해당 bottom:0 을 계속 적용한다.

List는 하나의 변수에 여러값을 담을수 있다.

each문으로 출력한다.

@mixin List_Test($property, $value) {
    $prefixes: webkit, moz, ms, o;
    @each $prefix in $prefixes {
        #{'-' + $prefix + '-' + $property}: $value;
    }
    // 기본
    #{$property}: $value;
}

Map 은 key와 value 가 세트다. json 형태로 생각하면 된다.

$Map_test :(
    "인사":"hello",
    color:#000,
    "margin":"20px"
);
@each $name, $val in $Map_test {
    .map_test {
      #{$name} : $val; 
    }
}

scss -> css 빌드

.map_test {
  인사: "hello";
}
.map_test {
  color: #000;
}
.map_test {
  margin: "20px";
}

MAP 2개 이상 사용시

기본은 기본값이 있고, 그외의 값 사용시 따른값 출력한다

$Map_test :(
    first : (
        "인사":"hello",
        color:#000,
        "구매":"레몬"
    ),
    second:(
        "인사":"안녕",
        color:red,
        "구매":"딸기"
    )
);

@function mapFunc($key,$type:"first"){
    @each $name, $val in map-get($Map_test,$type){
      @if($key == $name){
        @return $val;
      }
    }
}

@mixin map-test($property,$type){
    #{$property}: mapFunc($type);
    @at-root body & .abc .edf & &{ // & 는 
        #{$property}: mapFunc($type,second);
    }
}

.MAP_TEST{
    @include map-test(color,"구매")
}