# SASS Editing
SASS (opens new window) is a popular CSS extension language. It gives you variables, nesting, mixins, partials and more, which help you reuse code and be more productive.
Bootstrap Studio has full support for creating and editing SCSS files. SCSS code is edited inside our code editor, giving you Sublime Text-like keyboard shortcuts and full control over code organization.
# Setting up SASS editing
As of Bootstrap Studio 5, the SASS compiler is bundled with the app, so you can write SASS code straight away. There is no need to setup anything.
For Bootstrap Studio 4.5.8 and below, you will need to install a helper utility that works together with the app to compile your SASS code. Continue to our SASS installation guide for more.
# Creating and Editing SCSS Files
SCSS files are created by right clicking the Styles group in the Design panel and choosing the New > SCSS File option.
To edit a .scss file, double click it. This will open it in our code editor. When you save your code, SASS will be automatically compiled and displayed in the application.
All SASS features are supported, including variables, mixins and partials. Refer to the official SASS documentation (opens new window) for examples and lessons.
Note
Bootstrap Studio supports only the SCSS syntax, not the SASS one. The difference between the two is minimal. You can learn more here (opens new window).
TIP
You can link Bootstrap Studio with Visual Studio Code, Atom, Sublime Text, IntelliJ and other editors, and edit your SASS code there. Learn more in our External Editors guide.
# How SCSS Files are Compiled
If you've written SASS before, you already know how things work. Bootstrap Studio compiles every SCSS file that isn't a partial into a xxx.compiled.css file that is included in the <head> of your pages.
SASS partials (.scss files that start with an underscore e.g. _xxx.scss) are supposed to hold reusable mixins, variables and other code, so no xxx.compiled.css files are created for them. Instead, you are expected to @import these into other SASS files.
You can control the order in which SASS files are included in the page, using the Include Order dialog.
# SASS Export
When exporting a design, the app with automatically compile all of your SCSS and create the respective CSS files.
If you wish to keep your SCSS files, enable the Export SASS option in the Export Settings dialog. This will make sure your original SCSS source files are saved to the disk alongside the compiled stylesheets.