Menu icon Foundation
Add my own class with Sass

Hello,

I would like to add my own CSS class with Sass, but I don't know the best and good way to do it.

  .my_wrap{
    padding:40px 0;
    
    bg_wrap_grey{
    background-color:grey;
    }
    
    bg_wrap_blue{
    background-color:blue;
    }
    
    bg_wrap_red{
    background-color:red;
    }    
  }

         

I don't know exactly where I have to put this code.
In _settings.scss or app.scss or functions.scss?

Can you please help me?

Thank.

Kevin

Sassclass

Hello,

I would like to add my own CSS class with Sass, but I don't know the best and good way to do it.

  .my_wrap{
    padding:40px 0;
    
    bg_wrap_grey{
    background-color:grey;
    }
    
    bg_wrap_blue{
    background-color:blue;
    }
    
    bg_wrap_red{
    background-color:red;
    }    
  }

         

I don't know exactly where I have to put this code.
In _settings.scss or app.scss or functions.scss?

Can you please help me?

Thank.

Kevin

Cliff Curtis over 5 years ago

You can probably just place it in the app.scss file. I was worried that my additions might get tossed out during an upgrade. To play it safe, create a new text file named something like "_YourFileName.scss" and place it in the same folder as your app.scss file.

Then open up your app.scss file and add a line of code at the end to import it...

@import "_YourFileName.scss";

While you're at it, duplicate your _settings.scss file and name the new file _customSettings.scss. Then reference that from your app.scss file instead of _settings.scss also (then you'll always have an original file and if the _settings.scss gets wiped out during an upgrade your customizations will be safe.