The CSS preprocessor is a language that can be used to define your own CSS rules. It could be used for custom properties or just for creating variables. On the other hand, the CSS variables (also called custom properties) are dynamic values that can be reused across multiple elements and style rules in a web page.