How to add css into .scss file or theme

Question

I am trying to customize a theme of BigCommerce . The problem is this theme is using SASS (.scss) files instead of css. I have basic knowledge of SASS.

But I need to customize theme according to html template. In other word you can say I am trying to convert html template into a theme (free theme that is downloaded from market). Issue there is that, html template is using CSS and theme uses .SCSS. So right now I am trying to find way to add css of template into theme.

Right now I am finding way to embed my css into theme and here are few things that I have tried I tried to directly add CSS into .SCSS file like this

.header-logo-text{color:#ffffff!important;}

The above css code which I am typing in theme.scss file (just for testing purpose) to check whether writing css in .scss file will take any effect or not, But this way it didn't change font color!

In a second way I tried to add css in html tags using style like this

<div class="anyclass" style="background:red;">  

This way its picking up css.

I have created online store on bigcommerce site and trying to customize from customize option oprovided by bigcommerce. Since I couldn't see any upload file option through which I can directly upload my css files into it, thats why trying to somehow add css in current files of theme either in html or in .scss.

And not a single css file is present in theme, how I can add my css into that theme?

Answer 1

SASS with the .scss syntax is a superset of CSS. That means valid CSS is automatically valid SASS (not in the other syntax .sass though). Of course you need to make sure you're SASS file gets compiled and included.

TL;DR: you can use CSS inside .scss files.