CSS elements within other CSS elements

Solution 1:

This is sass. There is sass and scss syntax. The one you have above is scss. They have .scss or .sass file-types. Sass-Variant drops the brackets and works with indents alike CoffeeScript or YAML.

Since you are using React now, you can just install a "sass" package with yarn add or npm install command. There are different versions of sass because of legacy and different environments. You can decide if you want to install it locally (per project) or globally (-g flag for npm).

Usually, I go with the package named sass. You could probably also use dart-sass. If you want to get fancy: more-details-about-sass-variants.

You can read more here: https://create-react-app.dev/docs/adding-a-sass-stylesheet/.

This tool supports sass and scss with different setups: sass playground