SCSS 활용 팁 2. @if/@else를 포함한 @mixin으로 텍스트 말줄임 쉽게 처리하기

한정된 공간에서 너무 긴 텍스트를 보여주게되면 로딩속도와 가독성이 떨어지는 것은 물론이고 디자인의 일관성까지 해치게 됩니다. 그래서 중요한 텍스트만 간결하게 보여주고 필요시 상세페이지로 유도하기 위해 말줄임 처리: ellipsis를 사용하게 되는데요. css에서 ellipsis 처리하는 방법도 간편하긴 하지만, 여러군데에 처리가 필요한 경우에는 관리가 힘들어질 수 있습니다. 그래서 scss @mixin을 활용하여 반복 사용이 가능한 코드를 만들어 처리해 보려고 합니다.

🚨주의사항🚨
본 게시물의 예제에서는 코드의 변환된 모습 위주로 보여주기 위해 생략했지만, 텍스트 말줄임을 처리하기 위해서는 고정된 width값이 반드시 필요합니다. width가 지정되지 않을 경우 말줄임이 동작하지 않습니다.

@mixin

@mixin이란 한번 작성한 코드를 여러 곳에서 쉽게 재사용 할 수 있도록 도와주는 기능으로, 함수처럼 동작합니다. 한 곳에 정의하고 여러곳에서 재사용이 가능하므로 유지보수에 용이하며, 매개변수와 조건문 등을 사용해 유연한 스타일 변화를 줄 수 있다는 장점이 있습니다.

한 줄 말줄임 처리

텍스트가 한줄인 경우 넘치는 텍스트를 말줄임으로 처리할 @mixin을 다음과 같이 만들고, @include로 불러와 사용했습니다.

@mixin text-ellipsis {
  white-space: nowrap; //텍스트 줄바꿈 방지
  overflow: hidden; //넘치는 텍스트 숨김
  text-overflow: ellipsis; //넘칠 때 말줄임 표시
}

//사용하기
.text-ellipsis {
  @include text-ellipsis;
}

 

변환된 css는 이렇습니다.👇👇

/* css */

.text-ellipsis {
  wihte-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

여러 줄 말줄임 처리

처리할 텍스트가 여러줄일 경우는 어떻게 할까요? 이럴땐 매개변수를 이용합니다.

@mixin multi-line-ellipsis($lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines; // 보여줄 줄 수
  -webkit-box-orient: vertical;
}

.multi-line-ellipsis {
  @include multi-line-ellipsis; // 기본값 사용
}

.three-line-ellipsis {
  @include multi-line-ellipsis(3); // 3줄 보여줌
}

매개변수 $lines로 보여줄 줄 수를 넘겨받아 스타일코드를 작성합니다. 변수의 기본값도 설정할 수 있습니다. 아무런 값도 전달하지 않으면, 기본값인 2줄을 보여주는 코드가 작성됩니다.

 

/* css */

.multi-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.three-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

조건문을 사용하여 한 줄, 여러 줄 모두 지원하는 @mixin 만들기

이번에는 조건문 @if와 @else를 사용하여 한 줄과 여러 줄에 모두 사용할 수 있는 @mixin을 만들어 보겠습니다.

@mixin ellipsis($lines: null) {
  overflow: hidden;
  text-overflow: ellipsis;

  @if $lines == null {
    white-space: nowrap; // 한 줄 말줄임
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines; // 줄 수 설정
    -webkit-box-orient: vertical;
  }
}

.text-ellipsis {
  @include ellipsis;
}

.multi-line-ellipsis {
  @include ellipsis(4);
}

ellipsis라는 mixin을 작성하고, $lines로 줄 수를 전달하여 줄 수에 따라 동적으로 말줄임을 처리하도록 했습니다. $lines의 기본 값이 null이므로 아무것도 전달하지 않으면 한 줄 말줄임이, 숫자를 전달하면 여러 줄 말줄임이 동작하게 됩니다.

/* css */

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}