CODEWITHSUNDEEP
csssassless
StackOverflowed
StackOverflowed

Reputation: 5975

CSS elements within other CSS elements

I'm a backend developer tasked withed moving a front end from a custom framework to React. (Spare a thought for me please). I've come across CSS classes within other CSS classes such as:

    content.document{
       display: flex;
        .important{
         background-color: #FAD08A;
         padding: 20px 0;
         border-radius: 5px;
         position: relative;

          img.important{
            width: 70px;
            float: right;
          }
        
           h2 {
             font-size: 16px;
             color: #ccc;
             text-align: center;
             line-height: normal;
         }
    }
}

I have never seen this way of doing CSS and of course if I paste it into a normal CSS file, it doesn't work.

Is there a library that would all me to have CSS classes defined within other CSS classes (such as how h2 is defined in .important above)? I'd rather not have to modify tons of CSS to get this to work.

Upvotes: 1

Views: 47

Answers (2)

F. Müller
F. Müller

Reputation: 4062

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

Upvotes: 1

Esteban Vertzner
Esteban Vertzner

Reputation: 11

As Jon mentioned, it is written in SCSS. You can try to use an online tool that converts SCSS to CSS.

Upvotes: 0

Related Questions