[Sass] 공통 mixin 정리

📄  _mixins.scss

◽ clear: both;

@mixin clearfix() {
  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

 

 

◽ 말줄임

@mixin Nellipsis ($lines: null) {
	@if ($lines == null) {
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	} @else {
		display: block;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: $lines;
		-webkit-box-orient: vertical;
	}
}

 

 

◽ 줄바꿈 속성

@mixin wordWrap {
	word-break:break-word;
	word-wrap:break-word;
}

 

 

◽ 생략

@mixin ellipsis($line: 1) {
  @if ($line == 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
  }
}

 

 

---

 

 

출처

https://redbinalgorithm.tistory.com/641

https://gist.github.com/drifterz28/8450208

https://13akstjq.github.io/sass/2020/02/22/useful-sass-mixin.html

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.