@mixin을 사용하여 min, max width를 지정해주는 클래스를 만들자

컴포넌트에 width값을 받아 min, max width를 지정해주는 컴포넌트를 만들수도 있다. 
굳이 컴포넌트까지 만들지 않으려면 mixin을사용하여 클래스를 만들어주자.

@mixin minmax-classes {
  @for $i from 50 through $minmax-width {
    $value: $i * 1px;
    .minmax#{$i} {
      min-width: $value;
      max-width: $value;
      width: $value;
    }
  }
}

@include minmax-classes;

width, min-width, max-width 값이 200으로 들어간다.
생각보다 많이 사용하게되므로 만들어두면좋다.

 

사용

<div class="minmax200">인덱스 영역</div>