[LESS] 함수 만들어 쓰기

position: absolute로 이미지를 띄울 일이 많아져서

공통점이 많길래 하나의 함수로 만들어 사용하면 편할 것 같아 만들었습니다.

 

less 함수

// function
.absoluteImg(@width,@height,@top,@right,@bottom,@left,@backImg){
    position: absolute;
    width: if(isstring(@width),auto,unit(@width,px));
    height: if(isstring(@height),auto,unit(@height,px));
    top: if(isstring(@top),auto,unit(@top,px));
    right: if(isstring(@right),auto,unit(@right,px));
    bottom: if(isstring(@bottom),auto,unit(@bottom,px));
    left: if(isstring(@left),auto,unit(@left,px));
    background-image: url("@{img}/@{backImg}");
}

@로 변수를 설정해서 각 값을 넣어줍니다.

width, height, top, right, bottom, left, imgsrc(이미지 소스는 폴더/파일이름 형식으로 지정을 했습니다.)

 

사용은 이렇게 합니다.

.absoluteImg(1920,740,-100,-1500,'auto','auto','oto_main02.png');

 

사용할 때와 함수를 설정할때를 같이 보며 해석을 해보자면

top, right, bottom, left 값은 4개 모두 지정할 일이 없습니다.

top,right

botto,left 와 같이 짝을 지어 사용하는 일이 많을텐데

 

top, bottom을 같이 사용하는 일은 없으니까

그에 대한 대응을 해주고자 값이 필요 없을땐 'auto'를 넣어주어 에러를 방지합니다.

 

그래서 아래의 코드를 뜯어 보면

if(isstring(@top),auto,unit(@top,px));

 

 

 

if를 삼항연산자 처럼 사용하면 됩니다.

if(비교식,참,거짓);

 

따라서 isstring() 에서 @top이 숫자가 아니라 'auto'로 들어왔다면 string으로 인식이 되어 true가 되고,

참에 있는 값을 반환합니다.

그럼 auto가 나와 에러가 없습니다.

 

반대로 숫자가 들어왔을 시, isstring은 false를 반환하고,

거짓에 있는 값을 반환합니다.

 

unit은 뭐냐하면

unit(@top,px)

여기서 unit이란 함수를 쓰는데 제가 편해지고 싶어서 쓰는 것에 또 공통된 "px"까지 다 넣어주기 싫어서

받은 숫자 값을 px로 변환해주는 작업입니다.

 

그럼 내가 그냥 숫자를 넣어도 알아서 px로 변환해줍니다.

 

+추가

생각해보니 auto를 쓸 때도 'auto'로 쓰기 싫어서 바꾸었습니다.

 

함수

.absoluteImg(@width,@height,@top,@right,@bottom,@left,@backImg){
    position: absolute;
    width: if(isnumber(@width),unit(@width,px),auto);
    height: if(isnumber(@height),unit(@height,px),auto);
    top: if(isnumber(@top),unit(@top,px),auto);
    right: if(isnumber(@right),unit(@right,px),auto);
    bottom: if(isnumber(@bottom),unit(@bottom,px),auto);
    left: if(isnumber(@left),unit(@left,px),auto);
    background-image: url("@{img}/@{backImg}");
}

숫자인지 검사해서 숫자가 아니면 auto입니다.

 

사용

.absoluteImg(468,334,0,auto,auto,0,'sub01_top.png');

 

끝.