css, scss)@mixin- 반복적인 scss를 함수처럼! 한줄로 말줄임, 텍스트 줄임 ... 표시

@mixin (믹스인)은 CSS 스타일 그룹 선언을 정의하는 기능

scss로 css작성시 여러번 반복하는 코드를 사용할때 따로 파일을 만든다.

생성방법 -   @mixin 이름 { css내용 } 

쓸때 -  @include 이름;

 

아래 _mixin_common.scss 파일의 내용은 텍스트 한줄 말줄임 표시  '  ...  ' 이다. 

 

한줄 말줄임 표시

 

 

 

✨잊지말것!✨

styles.scss에 scss파일들을 컴포넌트로 분리해서 임포트 해놨다. 새로만든  _mixin_common.scss 파일도 추가하자

index.html > link태그 styles.css파일 연결

styles.css안에 scss 파일들 @import 

 

 

멀티 말줄임 표시

//한줄 말줄임표시 
@mixin ellipse {
  text-overflow: ellipsis;
  white-space: nowrap; //굽히지 않고 오른쪽으로쭉 이어지되
  overflow: hidden;  //넘치면 감춘다
}

//멀티 말줄임표시  scss로작성
@mixin multi-ellipsis($font-size, $line-height, $lines) {
  font-size: $font-size;
  line-height: $line-height;
  max-height: $line-height * $lines;
  overflow: hidden;  //여기까지는 ... 없고 두줄 넘으면 hidden.
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;  /* autoprefixer: off */ //작동이 안되면 sass 오류. 주석이 있어야 ' ... ' 이 작동.

}



//css로작성
multi-ellipsis{
  font-size: 14px;
  line-height: 19px;
  max-height: 38px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  /* autoprefixer: off */
}

 

 

설명에   ' 간단한 ...  '    이라고 적용된게 보인다.

 

 

 

 

 

 

 

출처

나, 제로스쿨- HTML/CSS 장인의 핵심정리 & 프로젝트 강의