Account
Cart

CSS / SCSS / Compiler

| 20 Comments on CSS / SCSS / Compiler

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

How it works

If you edit one of the files in your child-theme folder /assets/scss/, the compiler fetches source from parent-theme and compiles it with your custom code to child-theme /assets/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.

_bootscore-variables.scss

In _bootscore-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.

Simple

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

$primary: #FF0000;

Advanced

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-base:                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";

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

Prefix

Note that theme.json and the plugin’s CSS do not go through the compiler and use fixed variables like var(--bs-primary) instead of var(--#{$prefix}primary). If the bs- prefix has been changed (e.g., $prefix: myprefix-;), plugins and block colors will not work.

_bootscore-custom.scss

Add your own CSS or SCSS in _bootscore-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.

CSS

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

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

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

SCSS

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);
    }
  }
}

Mixins

@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

@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;
}

Offset

Bootscore uses scroll-margin-top to create an offset when scrolling to anchor IDs, ensuring content is not hidden behind the navbar. The default value is 55px, which matches the default navbar height. You can override this value using a variable to suit your needs:

:root {
  --#{$prefix}scroll-margin-top: 200px;
}

WooCommerce Colors

Bootscore uses custom variables to override WooCommerce colors with a fallback to Bootstrap variables. It first searches if var(--#{$prefix}wc-price) is defined in your child. If not, Bootstrap color var(--#{$prefix}secondary-color) is used. When inspecting the site, you will find something like this:

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.card .price {
  color: var(--bs-wc-price, var(--bs-secondary-color));
}

To use custom colors, just add them to the :root:

:root {
  --#{$prefix}wc-price: #339900;
}

_bootscore-utilities.scss

This file allows to create custom utilities using the Bootstrap Utility API. For example, a responsive border-radius:

$utilities: map-merge($utilities,
  ("rounded": (responsive: true,
      property: border-radius,
      class: rounded,
      values: (null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-xxl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill))),
  ));

Creates this classes:

rounded-md
rounded-md-0
...

rounded-lg
rounded-lg-0
rounded-lg-1
rounded-lg-2
rounded-lg-3
rounded-lg-4
rounded-lg-5
...

main.scss

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

editor-style

This registers the compiled main.css to the Gutenberg editor, ensuring that the backend has the same styles as the frontend by using classes in the block’s Advanced tab:

There are known minor issues with styles for cards and badges in the backend because the editor, for example, has problems displaying something like display: inline-block; correctly. However, both components work well in the frontend. You may want to take a look at our new prebuilt Block patterns.

theme.json

The theme.json file adds the defined colors from _bootscore_variables.scss file to the block editor.

scssphp

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.

wp-config.php:

// Disable environment check
define('BOOTSCORE_SCSS_SKIP_ENVIRONMENT_CHECK', true);

functions.php:

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

wp-config.php:

// Disable scssphp
define('BOOTSCORE_SCSS_DISABLE_COMPILER', true);

functions.php:

// Disable scssphp
add_filter('bootscore/scss/disable_compiler', '__return_true');

Errors

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/assets/scss/_bootscore-custom.scss on line 32, at column 0

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

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

On this page