전처리기 Haml, Pug, Slim, Scss, Stylus 사용해보기
요즘은 webpack, vite 등의 다양한 번들러들을 사용해서 개발을 하고 계시는데요.
그 안에서 사용할 수 있고, 단독으로도 사용할 수 있는 각종 전처리기들에 대한 문법들을 정리 해보았습니다.
Haml - For Loop
See the Pen Loop with Haml by YoungMinKim (@oinochoe) on CodePen.
Haml - While Loop
See the Pen While Loop in Haml by YoungMinKim (@oinochoe) on CodePen.
Haml - Each Loop
See the Pen Each Loop with Haml by YoungMinKim (@oinochoe) on CodePen.
Pug - For Loop
See the Pen Loop with Pug (for) by YoungMinKim (@oinochoe) on CodePen.
Pug - While Loop
See the Pen Loop with Pug (while) by YoungMinKim (@oinochoe) on CodePen.
Pug - Each Loop
See the Pen each Loop in Pug by YoungMinKim (@oinochoe) on CodePen.
Slim - For Loop
See the Pen For Loop with Slim by YoungMinKim (@oinochoe) on CodePen.
Slim - While Loop
See the Pen While Loop with Slim by YoungMinKim (@oinochoe) on CodePen.
Slim - Each Loop
See the Pen Each Loop with Slim by YoungMinKim (@oinochoe) on CodePen.
Scss - For Loop
See the Pen Loop with SCSS by YoungMinKim (@oinochoe) on CodePen.
Scss - While Loop
See the Pen Loop with SCSS by YoungMinKim (@oinochoe) on CodePen.
Scss - Each Loop
See the Pen Loop with SCSS by YoungMinKim (@oinochoe) on CodePen.
Stylus - For Loop
See the Pen Loop with Stylus by YoungMinKim (@oinochoe) on CodePen.
Stylus - While Loop
스타일러스에서는 while Loop이 없습니다.
Stylus - Each Loop
스타일러에서는 each Loop이 for Loop으로 비슷하게 구현 가능합니다.
See the Pen Loop with Stylus by YoungMinKim (@oinochoe) on CodePen.