【Nuxt.js】Stylus에서 Breakpoint를 효율적으로 쓰자

기존의 반응형 대응에는 css에 media query를 사용하지만 stylus에서 mixin을 사용하여 설명을 간소화하고 쓸 수 있습니다.
아래에 그 절차를 소개합니다.

우선 디자인 템플릿에 Vuetify를 도입하고 있으므로 이쪽을 참고로 설정을 해 나갑니다.
(이쪽은 사용의 프레임워크나 이용의 Breakpoint에 맞추어 주세요.)
htps : // / 에치 fyjs. 코 m / 엔 / 쿠 s와 미자치 온 / b 레아 k 포인 ts

기존 CSS

@media screen and (max-width: 600px) {
  color: red;
}

Stylus에서 쓰는 법

Stylus에서도 거의 변함없이 태그를 생략할 정도밖에 차이가 없습니다.

@media screen and (max-width: 600px) {
  color red
}

block mixin 사용

Stylus에서는 + 접두사를 붙여 mixin을 호출 블록에 전달할 수 있습니다.
Sass 에서는 필요했던 @mixin 이나 @include 의 표기가 불필요합니다.

hover() {
  &:hover, &:active {
    {block}
  }
}
+hover() {
  text-decoration: underline;
}

이것들을 응용하여 media query를 작성해 갑니다.

변수 설정

우선은 변수용의 stylus 파일을 작성해, Vuetify의 breakpoint의 숫자를 넣어 갑니다.

_variables.styl

small = 600px
midium = 960px
large = 1264px
xlarge = 1904px

mixins로 설정

다음에 mixin용의 파일을 준비해 기입해 간다.

breakpoint-sm()
  @media screen and (min-width: small)
    {block}
breakpoint-md()
  @media screen and (min-width: midium)
    {block}
breakpoint-lg()
  @media screen and (min-width: large)
    {block}
breakpoint-xl()
  @media screen and (min-width: xlarge)
    {block}

추가 개선

breakpoint(breakpointNames)
  for name in breakpointNames
    if name == 'xm'
      {block}
    if name == 'sm'
      @media only screen and (min-width: small)
        {block}
    if name == 'md'
      @media only screen and (min-width: midium)
        {block}
    if name == 'lg'
      @media only screen and (min-width: large)
        {block}
    if name == 'xl'
      @media only screen and (min-width: xlarge)
        {block}

사용하는 style에 쓴다

각각의 폭에 맞는 것에 써 갑니다.

style.styl

.contents
  padding 0px
  +breakpoint(xl)
    padding 10px
  +breakpoint(sm)
    padding 20px
  +breakpoint(md)
    padding 30px
  +breakpoint(lg)
    padding 40px
  +breakpoint(xl)
    padding 40px

컴파일

컴파일되면 이와 같은 결과가 됩니다.

style.css

.contents {
  padding: 0px;
}
@media only screen and (min-width: 600px) {
  .box {
    padding: 10px;
  }
}
@media only screen and (min-width: 960px) {
  .box {
    padding: 20px;
  }
}
@media only screen and (min-width: 1264px) {
  .box {
    padding: 30px;
  }
}
@media only screen and (min-width: 1904px) {
  .box {
    padding: 40px;
  }
}