From d82a96b693a0323e163569bc71351d20815a7885 Mon Sep 17 00:00:00 2001
From: Vineet Likhitkar <83384807+iamv1n@users.noreply.github.com>
Date: Sat, 1 Jan 2022 06:29:32 -0800
Subject: [PATCH] Add CSS Preprocessor Resources (#975)

---
 .../100-frontend/content/109-css-preprocessors/readme.md  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md b/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
index 107291cf1..aad47afac 100644
--- a/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
+++ b/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
@@ -1 +1,7 @@
-# Css preprocessors
\ No newline at end of file
+# Css Preprocessors
+
+CSS Preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/css-preprocessors/#:~:text=CSS%20Preprocessors%20compile%20the%20code,preprocessor%20were%20not%20in%20place.'>CSS Preprocessors Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/'>Why Use Preprocessors?</BadgeLink>