Embed saas and css properties in index.html

Hello I am working with my custom layout and I want to use bootstrap via cdn and working with internal style sheet with style tag. I want to do some custom changes in layout in saas file. How is it possible to put .css and saas code in index.html. This is my scss code.

$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

   body {
      background-color: $bgcolor;
      color: $textcolor;
      font-size: $fontsize;
    }

This is my css code.

body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

index.html file

 <!DOCTYPE html>
    <html>
    <link rel="stylesheet" href="mystyle.css">
    <body>
    
    <h1>Hello World</h1>
    
    <p>This is a paragraph.</p>
    
    </body>
    </html>``

Apparently these are three files. I want to write all of this in index.htm file just like we write css code using in header section. How can write saas code in index.html file and use bootstrap via cdn.

Answer

Do you mean SASS instead of SAAS?

You cannot use SASS CODE in HTML as SASS is a preprocessor. SASS CODE will not be understood by the browser and needs to be compiled to native CSS CODE which you can add to the HTML. Maybe that helps:

https://sass-lang.com/install
https://sass-lang.com/guide
https://www.w3schools.com/sass/sass_intro.asp

If you include Bootstrap from CDN you include standard classes with standard colors and standard settings. Yes you are able to overwrite the standard classes with you own classes. Yes: that can be done in the head (in a <style> section) or just in an additonal added CSS file.

You can do that just writing native CSS! Note: There is indeed NO SASS needed to do that!

Better way to adapt your wanted colors and settings to Bootstrap itself. You can do such a ‘Theming’ when you download the Framework (the SASS files), add your theming vars with your setting and then compile Bootstrap with the theming vars to CSS code. Then all your needed colors are included to the framework classes.

Here is a online Bootstrap editor you can use to change the variables. The editor compiles the SASS files online for you to CSS CODE so you don’t need to use SASS yourself (NO SASS NEEDED as well):

http://pikock.github.io/bootstrap-magic/app/index.html#!/editor

If you would like to do it the intendend way WITH SASS have a look here:

https://getbootstrap.com/docs/4.6/getting-started/introduction/
https://getbootstrap.com/docs/4.6/getting-started/download/#source-files
https://getbootstrap.com/docs/4.6/getting-started/theming/