SCSS Custom Variables Mixins

Mixins 기본

자주 사용하는 항목들을 「_mixins.scss」파일 내에 선언

 

SCSS(_mixins.scss)

@mixin ellipsis {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

 

SCSS(test.scss)

@import "mixins";

div {

  border: 1px solid red;

  height: 100px;

  width: 400px;

  p {

    @include ellipsis;

  }

}

 

HTML

    <div>

      <p class="test">mixins테스트가나다라마바사아자차카타파하라아아아테스트</p>

    </div>

 

ON BROWSER(적용 전)

 

ON BROWSER(적용 후)