From 665856ca22315e7713311634dabe94c2226df8fa 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>