CSS (Cascading Stylesheets) are pieces of code that set the visual styling of elements when rendered in a web browser. While CSS is constantly improving it lacks many useful features. That's where SCSS comes in. SCSS provides rich functionality that makes coding a lot more enjoyable and compiles to plain CSS when you publish your site. Think of it as CSS with Steroids.
For documentation about SCSS and it's features visit https://sass-lang.com/.
There are a few different places within the User Interface Builder where you can add SCSS:
Reset Styles
Removes margin and padding on the html and body tags
Interface Pre CSS
This is where you can define variables and basic styles that will be collated at the top of your interface's stylesheet, This means that all of your blocks and components will have access to these variables and styles to extend and use in their own scoped styles.
Block CSS
Often there will be CSS styling code within a block itself, These styles apply to all instances of a block. For example: The 'Horizontal Slider' block may have CSS detailing how it displays, scales and animates by default.
Scoped Block CSS
This is where you can add style rules that apply only within the scope of the selected instance of a block. To add styles select a block, and expand the CSS stacker drawer. Any CSS you add here will apply only to the selected block itself and not affect any other elements in your interface. As it's scoped you also do not need to write a selector rule, you can simply write the CSS entries and they will apply to the block and it's contents.
For example: If you select a block and you want the contents of that block to be aligned to the center, you can select the block and add text-align: center; without having to write .my-block { text-align:center; }
Interface Post CSS
This is where you can add your styles to override any existing style rules. Helpful if you want to override style rules across your interface.
When you press publish on your interface all of the SCSS will be collated together, compiled and minified ready to be rendered in your application.