Skip to content

CSS SCSS Styling Instructions Wiki

Jump to bottom
Daaimah Tibrey edited this page Jul 14, 2025 · 5 revisions

The Techtonica website uses Sass to manage its CSS for better organization and maintainability. Follow the steps below to make and apply styling changes.

Where to Make Styling Changes

  • All styling changes should be made to the Sass (.scss) files.
  • After making changes, you need to compile the .scss files to .css to apply the updates.

How to Install Sass

Install Sass using one of the following commands, depending on your operating system:

Mac: brew install sass/sass/sass

Windows: choco install sass

Compile Sass to CSS Once

After installing Sass, compile your .scss files to .css using the following command:

sass static/sass/<file-name>.scss static/css/<file-name>.css

Watch for Changes

To automatically compile and update the CSS whenever you modify the .scss files, use the --watch flag:

sass --watch static/sass/<file-name>.scss:static/css/<file-name>.css

By running the --watch command, any changes you make to the .scss files will be instantly compiled into the .css files, saving you time and ensuring that your styles are always up to date.

Best Practices

  • Keep the Sass files organized and well-commented.
  • Avoid modifying the generated .css files directly—make changes only in the .scss files.
  • Test your styling changes thoroughly to ensure consistency across different screen sizes and browsers.

Additional Resources

Clone this wiki locally