Majority of the core files included in Astroid framework get’s overwritten when you get an update for your template. The best way to write custom CSS/SCSS is by writing it into your custom files that won’t be overwritten on the next update.
Adding custom CSS/SCSS files is a piece of cake.
For adding a custom CSS file create a blank file in the following path: JOOMLA_ROOT/templates/YOUR_TEMPLATE/css/custom.css and that’s it, you have your custom CSS file that will be included the template.
For adding a custom SCSS file create a blank file at JOOMLA_ROOT/templates/YOUR_TEMPLATE/scss/custom/custom.scss and that’s it, you have your custom SCSS file that will be included the template. please note that for SCSS, you’ll have to create the custom folder as well.
Wasn’t that simple!!!
Please note that you have to clear astroid cache in order for your custom.scss file changes to be reflected in the browser.