Learning the pros and cons of SASS made me want to find out if CSS had similar functions that I could use instead. I did some research on MDN and W3Schools and discovered it did for variables and nesting!
CSS Variables – The var() Function
In the CSS stylesheet, we first declare the variables by using root:. The custom properties are then defined using two dashes, such as –blue. Please note that custom properties are case-sensitive. –Blue is not the equivalent of –blue.
Once the custom properties are defined under :root, we put the variables into rules for the selectors by using var().
Example:
:root { --blue: #1e90ff; }body { background-color: var(--blue); }Using CSS Nesting
Nesting works in CSS similarly to SASS. You put the child selector inside the parent’s } symbol. Remember to put an & symbol in front of nested compound and pseudo classes, such as :hover.
You can also put the & symbol in front of other nested child elements to ensure ensure backwards compatibility and make them easier to identify.
.parent { color: blue;& #child { font-size: 1em; }}I was disappointed to learn CSS doesn’t yet have a mixin or extend feature. Fingers crossed they will be added in the future!