[Sass] mixin으로 말줄임표 만들기

mixin

Scss에서는 믹스인이라는 문법이 있다.
반복적으로 재사용할 CSS 스타일을 하나의 함수처럼 지정해놓을 수 있다.

많은 mixin을 생성해도 호출하지 않으면 코드의 길이에 영향을 미치지 않는다는 점이 있다.

기본적으로 아래와 같이 정의할 수 있다.

@mixin 믹스인이름(필요에 따라 변수지정도 가능){
    내용
}

호출은 include 키워드를 이용한다.

@include 믹스인이름(지정했다면 변수사용 가능);

 

 

 

 

말줄임표 

텍스트의 양이 공간보다 넘치는 경우 mixin으로 말줄임표('...')를 만들 수 있다.

white-space는 자동 줄바꿈 여부에 관한 속성이다. nowrap으로 해제한다.
overflow:hidden으로 넘치는 텍스트 양을 가리고 elipse로 대체한다.

@mixin ellipse {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

적용한 경우 다음과 같다.

영역 이외에 ...로 표현된다

 

 

여러 줄일 경우의 말줄임표

여러 줄의 텍스트일 경우 변수로 설정하여 말줄임표를 만들 수도 있다.

크롬, 사파리 등의 웹킷계열 브라우저에서의 호환성을 위해 -webkit- 키워드를 사용했다.

-webkit-line-clamp는 몇줄을 넘기면 말줄임표를 사용할 것인지 지정하는 구간이다.

@mixin multil-ellipse($font-size, $line-height, $lines) {
  font-size: $font-size;
  line-height: $line-height;
  max-height: $line-height * $lines;
  overflow : hidden;
  display: -webkit-box;
  -webkit-line-clamp: $lines; 
  -webkit-box-orient: vertical; 
}

 

다음과 같이 적용되는 것을 볼 수 있다.

지정한 2줄 이외에 ...로 표현된다