전처리기 Haml, Pug, Slim, Scss, Stylus 사용해보기

요즘은 webpack, vite 등의 다양한 번들러들을 사용해서 개발을 하고 계시는데요. 

그 안에서 사용할 수 있고, 단독으로도 사용할 수 있는 각종 전처리기들에 대한 문법들을 정리 해보았습니다.

Haml - For Loop

Haml - While Loop

Haml - Each Loop

Pug - For Loop

Pug - While Loop

Pug - Each Loop

Slim - For Loop

Slim - While Loop

Slim - Each Loop

Scss - For Loop

Scss - While Loop

Scss - Each Loop

Stylus - For Loop

Stylus - While Loop

스타일러스에서는 while Loop이 없습니다.

Stylus - Each Loop

스타일러에서는 each Loop이 for Loop으로 비슷하게 구현 가능합니다.

 

 

출처 : https://css-tricks.com/how-to-write-loops-with-preprocessors/?fbclid=IwAR3Y7CP9nrXTf0xcq-SozYTRZPkfVMJmECo88M9WW0wiYs5F2M6ZLKXnLa0