Documentation Theme

CSS / SCSS / Compiler

Bootstrap source code is included in the theme and can be edited on the fly without using Gulp, Node, commands or any other technical stuff. Just add your styles, save and the built-in scssphp compiler will do the trick.

How it works

If you edit one of the files in your child-theme folder /css/scss/, the compiler fetches source from parent-theme and compiles it with your custom code to child-theme /css/main.css. Just refresh your page and view result. This may take a few seconds, because compiler merges Bootstrap with your custom code on every change from scratch.


In _bscore_variables.scss you can change the default variables of Bootstrap. Available variables can be found in _variables.scss and _variables-dark.scss.

Variables replaces compiled Bootstrap CSS snippets in main.css.


Add following variable to _bscore_variables.scss, save and refresh your page. All primary blue color is now red.

$primary: #FF0000;


Following variables are a good starting point to edit your theme in more detail, included color-system, border-radius, navbar, links and fonts.

Note that this are the default Bootstrap values. If you just copy them to your file and refresh page, you will see no changes. Start by changing the $blue color value.

// Color system
// scss-docs-start gray-color-variables
$white:                           #fff;
$gray-100:                        #f8f9fa;
$gray-200:                        #e9ecef;
$gray-300:                        #dee2e6;
$gray-400:                        #ced4da;
$gray-500:                        #adb5bd;
$gray-600:                        #6c757d;
$gray-700:                        #495057;
$gray-800:                        #343a40;
$gray-900:                        #212529;
$black:                           #000;

// scss-docs-start color-variables
$blue:                            #0d6efd;
$indigo:                          #6610f2;
$purple:                          #6f42c1;
$pink:                            #d63384;
$red:                             #dc3545;
$orange:                          #fd7e14;
$yellow:                          #ffc107;
$green:                           #198754;
$teal:                            #20c997;
$cyan:                            #0dcaf0;

// scss-docs-start theme-color-variables
$primary:                         $blue;
$secondary:                       $gray-600;
$success:                         $green;
$info:                            $cyan;
$warning:                         $yellow;
$danger:                          $red;
$light:                           $gray-100;
$dark:                            $gray-900;

// Settings for the `<body>` element.
$body-bg:                         $white;
$body-color:                      $gray-900;

$body-tertiary-color:             rgba($body-color, .5);
$body-tertiary-bg:                $gray-100;

// Dark mode
$body-bg-dark:                    $gray-900;
$body-color-dark:                 $gray-500;

$body-tertiary-color-dark:        rgba($body-color-dark, .5);
$body-tertiary-bg-dark:           mix($gray-800, $gray-900, 50%);

// Navbar
$navbar-light-color:              rgba($black, .55);
$navbar-light-hover-color:        rgba($black, .7);
$navbar-light-active-color:       rgba($black, .9);

// Border radius
$border-radius:                   .375rem;
$border-radius-sm:                .25rem;
$border-radius-lg:                .5rem;
$border-radius-xl:                1rem;
$border-radius-2xl:               2rem;
$border-radius-pill:              50rem;
// Checkboxes
$form-check-input-border-radius:  .25em;

// Style anchor elements.
$link-decoration:                 underline;
$link-hover-decoration:           null;

// Fonts
$font-family-sans-serif:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:           SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

// Headings & display
$headings-font-family:            null;
$headings-font-weight:            500;
$display-font-weight:             300;


Add your own CSS or SCSS in _bscore_custom.scss. Because this file is compiled after Bootstrap, you’re also able to use Bootstrap mixins for better code.

Code overrides or extends Bootstrap compiled CSS snippets in main.css.


.card {
  color: var(--bs-light);
  background-color: var(--bs-dark);

.card a {
  color: var(--bs-danger);

.card h2 a {
  color: var(--bs-warning);


The same result like above using SCSS syntax.

.card {
  color: var(--#{$prefix}light);
  background-color: var(--#{$prefix}dark);

  a {
    color: var(--#{$prefix}danger);

  h2 {
    a {
      color: var(--#{$prefix}warning);


@include media-breakpoint-down(md) {
  body {
    color: var(--#{$prefix}danger);
    background-color: var(--#{$prefix}dark);

@include media-breakpoint-up(md) {
  body {
    color: var(--#{$prefix}success);
    background-color: var(--#{$prefix}light);

.btn-red {
  @include button-variant(#EF4444, #EF4444);


@extend is a powerful Sass function to add Bootstrap styles to another classes. For example, using a WordPress plugin with custom button styles and it’s not possible to change the classes in the plugin HTML. Instead of unhandy changing the classes with JavaScript, the styles can simply added to the button by extend.

.plugin-button-class {
  @extend .btn;
  @extend .btn-primary;

WooCommerce Colors

bootScore uses custom variables to override WooCommerce colors with a fallback to Bootstrap variables. It first searches if var(--bscore-wc-shop-table-border) is defined in your child. If not, Bootstrap color var(--bs-gray-300) is used.

.woocommerce table.shop_table, .woocommerce table.shop_table td {
    border-color: var(--bscore-wc-shop-table-border, var(--bs-gray-300));

To use your own colors, just add them to the :root.

:root {
    --bscore-wc-shop-table-border: var(--bs-danger);


This file collects all other scss files and source from parent. Add more using @import. Create file _header.scss with an underscore and place it in same folder. Add @import "header"; to main.css and do your styles for the header in _header.scss. Add as many files as you want, all styles will be compiled to one single CSS file.

Developer mode

If the website is under development, it is helpful to enable developer mode. Use it not on a live site, because dev mode slows down page load. To set the environment to development, add the following line to your wp-config.php:

// Dev mode to force recompile scss and add source map
define('WP_ENVIRONMENT_TYPE', 'development');
  • scssphp starts compiling when one file in folder /scss/ is changed, but not if a file in a subfolder is changed. By using developer mode, scssphp compiles on every page load. This is also useful if, for whatever reason, scssphp stops compiling when a scss file is modified.
  • Developer mode creates a source map /css/main.map.

Disable environment check

Environment check can be disabled (don’t always compile in development or local). This is a known issue using LocalWP compiling SCSS takes +30s. Use a constant in wp-config.php or a filter in functions.php.


// Disable environment check


// Disable environment check
add_filter('bootscore_scss_skip_environment_check', '__return_true');

Disable scssphp

If you don’t want to use scssphp, e.g. creating a rtl site and scssphp doesn’t support rtl, you can disable scssphp and use another compiler like Gulp. Use a constant in wp-config.php or a filter in functions.php.


// Disable scssphp


// Disable scssphp
add_filter('bootscore_scss_disable_compiler', '__return_true');


If something in your code went wrong, for example a missing close } or ;, compiler will show an error in frontend.

Something went wrong with the SCSS compiler.

Enable developer mode to get detailed information about what’s happened. The error indicates in which file and line the error occurred.

bootScore SCSS Compiler - Caught exception:

unclosed block: failed at `` /Applications/MAMP/htdocs/my-new-wordpress/wp-content/themes/bootscore-child/css/scss/_bscore_custom.scss on line 32, at column 0

Update Bootstrap

bootScore is always updated to the latest Bootstrap version. To get latest Bootstrap in your child, just recompile yours. Recompile means that just something in your SCSS files have to be changed.

20 Comments on “CSS / SCSS / Compiler”

  • Lo Rednib


    Thanks Basti, as I told you yesterday, this is exactly what I was looking for since last week.
    With this new version you make my life easier!
    Thank you for your good work 👍

    • Basti


      Most of this work was done by Justin. So, let’s do a big thank you to him 🙏 👍

  • Lo Rednib


    Thanks Justin ! 🙏
    I would like to change the main color, according to the 4 main pages of the brands of the site.
    4 brands that each have their own color theme.
    For each brand there are corresponding products and they must have the associated color of their brand.
    The 4 brands and their corresponding color:
    $cl: #3c3c3b;
    $lw: #71110f;
    $mg: #113e65;
    $gv: #bd8628;
    $primary: $default_color;
    Do you think this is possible ?

    • Basti


      Think not in that way. But you can create 4 different child-themes and assign it to the specific pages with Multiple Themes plugin https://wordpress.org/plugins/jonradio-multiple-themes/. This plugin is used on bootscore.me as well. Check in navbar Theme > Header Nav Default. There is the bootscore-child while all other pages using the bootcommerce-child.

      • Lo Rednib


        I didn’t know you could do that.
        I’ll have a look. Otherwise I’ll try to impose a colour scheme for the whole site 🙂

  • Lo Rednib


    Hi Basti.
    I don’t know what I have done but I’ve got this error now :
    Warning: filemtime(): stat failed for …/wp-content/themes/bootscore-main/css/lib/bootstrap.min.css in …/wp-content/themes/bootscore-main/functions.php on line 249
    And there is no bootstrap.min.css in the folder bootscore-main/css/lib/, I’ve checked on your github.
    I’ve already deleted the bootscore-main and upoladed again from your github repo.
    Any idea ?

    • Basti


      Try to add something to your .scss file and save. Compiler should start to create the bootstrap.min.css. This file doesn‘t exist anymore by default. It will be created when you upload the theme or change something.

      • Lo Rednib


        It’s seems the scssphp is not doing his job actually.

        • Lo Rednib


          I think I know, I must have invalid syntax somewhere in my scss. But it is not in bootscore, I’ve check it all.
          I’ll find it

          • Basti


            It‘s not an invalid syntax, this will throw different error. Can you please share a link to your site?

            • Lo Rednib


              I’m in localhost Basti…
              I’ve try to open only your bootscore-main in my download folder to see if the scssphp is working but when I change something in a scss folder it doesn’t compiled anymore … I’m lost

              • Lo Rednib


                I don’t need to have watch sass anymore, right ?

                • Lo Rednib


                  Hi Basti,
                  I’ve try a fresh install with a new WordPress and add bootscore-main and bootcommerce-child last version from your Github.
                  bootcommerce-child is compiled the bootstrap.min.css but not bootscore-main.
                  So I still have this issue :
                  Warning: filemtime(): stat failed for …/scssbootstrap/wp-content/themes/bootscore-main/css/lib/bootstrap.min.css in …/scssbootstrap/wp-content/themes/bootscore-main/functions.php on line 249
                  So, it’s looking for the bootstrap.min.css in the parent folder but there is not

                  • Basti


                    Hi Lo,

                    ok, we get closer.

                    1. You do not need the watch sass anymore. Just change something in a .scss file and save.
                    2. Activate parent-theme one time and refresh page.
                    3. Transfer your project to a live server.
                    4. Please open an issue at Github https://github.com/bootscore/bootscore/issues/new. So we can discuss if it’s better to ship a compiled css file in installation zip.

                    Edit. Just one more test: Copy the compiled bootstrap.min.css from your child to parent /css/lib/.
                    Edit. Which php version is running on your localhost?

                    • Lo Rednib


                      => The problem was never delete your bootstrap.min.css in your Parent Theme. And active first the Parent Theme. Because when you have you Child Theme scssphp seems to stop compiling the parent’s one

                      => If you deleted it like I did. Unactive the Child Theme and make a change in a scss file to force the scssphp to compile a new boostrap.min.css in the parent folder. Then active your Child Theme again.

  • dfgdsfgsdf dfsgdsfg


    I am using the child theme, and trying to change some of the colour variables. I am editing the _bscore_variables.scss file, but no matter what I change, there is no difference.

    For example, if my _bscore_variables.scss contains

    $body-bg: $black !default;

    there is no difference when refreshing the page.
    I know the file is being loaded because if I intentionally create a syntax error, I get an error message.

    Any idea why this might happen?

    • Basti


      Did you define $black? Sass is based on order.

      $black: #000000;
      $body-bg: $black !default;

      You can insert the colors directly as well.

      $body-bg: #000000;

      Check here https://github.com/bootscore/bootscore/issues/21

      • dfgdsfgsdf dfsgdsfg


        Thank you for the reply.

        Yes, $black is defined. I should have clarified, I copied the example from above, the one directly underneath “Start by changing the $blue color value.” and changed $white to $black for $body-bg. I also tried a lot of other changes with no success, including directly inserting the hex colours.

        I believe it is compiling when I make the changes because I get the 2-3 second extra load time when I make a change. I don’t get any errors like the ones in that github issue. I will get errors if I put the wrong syntax however, so I think the file is being loaded.

        • Basti


          What does the compiler error exactly say? Which theme version do you use?

  • Effectiva


    Very nice, thank you!

Comments are closed.

To top