sass 반복 처리를 사용한 클래스 부여 메모

14599 단어 SassCSS

컴파일 후 CSS



직장에서 궁극적으로 다음과 같은 CSS가 될 sass를 작성하고 싶습니다.
.class0-0 {
  width: 0.0px;
}

.class0-1 {
  width: 0.1px;
}

.class0-2 {
  width: 0.2px;
}

.class0-3 {
  width: 0.3px;
}

.class0-4 {
  width: 0.4px;
}

.class0-5 {
  width: 0.5px;
}

.class0-6 {
  width: 0.6px;
}

.class0-7 {
  width: 0.7px;
}

.class0-8 {
  width: 0.8px;
}

.class0-9 {
  width: 0.9px;
}

.class1-0 {
  width: 1.0px;
}

.class1-1 {
  width: 1.1px;
}

.class1-2 {
  width: 1.2px;
}

.class1-3 {
  width: 1.3px;
}

.class1-4 {
  width: 1.4px;
}

.class1-5 {
  width: 1.5px;
}

.class1-6 {
  width: 1.6px;
}

.class1-7 {
  width: 1.7px;
}

.class1-8 {
  width: 1.8px;
}

.class1-9 {
  width: 1.9px;
}

.class2-0 {
  width: 2.0px;
}

.class2-1 {
  width: 2.1px;
}

.class2-2 {
  width: 2.2px;
}

.class2-3 {
  width: 2.3px;
}

.class2-4 {
  width: 2.4px;
}

.class2-5 {
  width: 2.5px;
}

.class2-6 {
  width: 2.6px;
}

.class2-7 {
  width: 2.7px;
}

.class2-8 {
  width: 2.8px;
}

.class2-9 {
  width: 2.9px;
}

.class3-0 {
  width: 3.0px;
}

.class3-1 {
  width: 3.1px;
}

.class3-2 {
  width: 3.2px;
}

.class3-3 {
  width: 3.3px;
}

.class3-4 {
  width: 3.4px;
}

.class3-5 {
  width: 3.5px;
}

.class3-6 {
  width: 3.6px;
}

.class3-7 {
  width: 3.7px;
}

.class3-8 {
  width: 3.8px;
}

.class3-9 {
  width: 3.9px;
}

.class4-0 {
  width: 4.0px;
}

.class4-1 {
  width: 4.1px;
}

.class4-2 {
  width: 4.2px;
}

.class4-3 {
  width: 4.3px;
}

.class4-4 {
  width: 4.4px;
}

.class4-5 {
  width: 4.5px;
}

.class4-6 {
  width: 4.6px;
}

.class4-7 {
  width: 4.7px;
}

.class4-8 {
  width: 4.8px;
}

.class4-9 {
  width: 4.9px;
}

.class5-0 {
  width: 5.0px;
}
  • 클래스 앞의 숫자는 0부터 시작하여 10 번 반복하면 1 씩 증가합니다.
  • 클래스 뒤의 숫자는 0에서 9까지 1씩 증가하는 것을 반복합니다.

    이것을 51회 반복하고 싶습니다. 자, 어떻게 쓰겠습니까? 선배의 코드가 공부가 되었으므로, 기록해 두려고 생각했습니다.

    결론



    시작하기 전에 sass에서 씁니다.
    @for $i from 0 through 50 {
      $v1: floor($i / 10);
      $v2: $i % 10;
      .class#{$v1}-#{$v2} {
        width: #{$v1 + "." + $v2}px;
      }
    }
    

    $v1의 행 설명


    $v1 오는 것은,
  • 0이 10회
  • 1이 10회
  • 2가 10회
  • 3이 10회
  • 4가 10회
  • 5가 1회

  • 의 51회 반복이 가능하면 OK입니다.
    $v1: floor($i / 10);
    
    floor 는 소수점 이하를 줄입니다. 반올림이 아닌 절하이므로 0.9에서도 0으로 합니다.
  • 0.0에서도 1
  • 0.1에서도 1
  • 0.2에서도 1
  • 0.3에서도 1

  • ... 생략
  • 0.8에서도 1
  • 0.9에서도 1

  • 그래서 0이 10회를 실현하고 있습니다. 첫 번째, @for $i from 0 through 50 에서 51번 반복하는 것으로 하고 있기 때문에, 5는 1회만의 실행으로 끝납니다(51회째의 실행이므로).

    $v2 행 설명


    $v2 오는 것은,
  • 0% 10 = 0
  • 1% 10 = 1

  • ... 생략
  • 9% 10 = 9
  • 10% 10 = 0
  • 11% 10 = 1

  • ... 생략
  • 41% 10 = 1

  • 라는 느낌으로, (0,1,2,3...9)가 51회 반복됩니다.
  • 0번째는 ( 0 % 10 = 0 )이므로, 결과는 0
  • 51번째는 ( 50 % 10 = 0 )이므로 결과는 0

  • 라는 느낌이 듭니다.

    시도하고 싶은 분에게



    여기서 sass를 실시간으로 컴파일하기 때문에
    @for $i from 0 through 50 {
      $v1: floor($i / 10);
      $v2: $i % 10;
      .class#{$v1}-#{$v2} {
        width: #{$v1 + "." + $v2}px;
        comment: #{$i + 1}回目 // これは分かりやすくするためのコメントです
      }
    }
    

    6행째는, 실제로 css로서 컴파일할 때는 지워 둡시다. 이번은, 몇번째인가를 하기 위해서 붙였을 뿐입니다.

    실제 이미지↓


    이상입니다!

    참고


  • htps : //는 ck에서. jp/아r치ゔぇs/1647/
  • 좋은 웹페이지 즐겨찾기