전처리기 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.

 

 

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