Writing SASS in Bootstrap Studio

SASS 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.

Note: Bootstrap Studio supports only the SCSS syntax (the one shown above), not the SASS one. The difference between the two is minimal. You can learn more here.

Setting up SASS editing

To keep file size low, we don't bundle a SASS compiler with Bootstrap Studio. Instead, we provide an easy to install utility that works together with the app to compile your SASS code. It is called bstudio-sass and supports Windows, macOS and Linux.

To install SASS support:

  1. Install a recent version of Node.js for your os. Version 8.0 or later is recommended.
  2. Open a terminal/console window, and run this command: npm install bstudio-sass -g. In some cases, the command might fail if you are installing the sass module as root. To fix this, add the --unsafe-perm flag at the end.
  3. After the above is done, run this command: bstudio-sass. You should see a message that everything is installed correctly, and a path that you should use.
  4. Open the File > Design Settings dialog, switch to the SASS tab and paste the path to bstudio-sass that you got in the above step.

From that moment on, when you write SASS code, it will be compiled and you will see the result in the app when previewing and exporting, just like you do with regular CSS.

Creating and Editing SCSS Files

SCSS files are created by right clicking the "Styles" group in the Design panel and choosing the "Create 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 using the bstudio-sass helper utility.

All SASS features are supported, including variables, mixins and partials. Refer to the official SASS documentation for examples and lessons.

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. And of course, you can choose to minify everything when exporting using the Minify option. This will bundle all your CSS and compiled SASS into a single file.