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 any other technical stuff. Just add your styles, save and the built-in scssphp compiler will do the trick.

Contents

How it works

_bscore_variables.scss

Disable environment check

Disable scssphp

Errors

Update Bootstrap

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.

_bscore_variables.scss

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.

Simple

Add following variable to _bscore_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-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;

_bscore_custom.scss

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.

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

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

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

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/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
says:
September 30, 2021 at 12:28
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
says:
September 30, 2021 at 12:32
Most of this work was done by Justin. So, let’s do a big thank you to him 🙏 👍

Lo Rednib
says:
October 1, 2021 at 23:23
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
says:
October 4, 2021 at 10:04
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
says:
October 5, 2021 at 13:10
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
says:
October 5, 2021 at 14:47
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
says:
October 5, 2021 at 14:57
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
says:
October 5, 2021 at 15:25
It’s seems the scssphp is not doing his job actually.

Lo Rednib
says:
October 5, 2021 at 15:34
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
says:
October 5, 2021 at 15:44
It‘s not an invalid syntax, this will throw different error. Can you please share a link to your site?

Lo Rednib
says:
October 5, 2021 at 16:54
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
says:
October 5, 2021 at 16:57
I don’t need to have watch sass anymore, right ?

Lo Rednib
says:
October 5, 2021 at 17:44
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
says:
October 5, 2021 at 18:12
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
says:
October 6, 2021 at 10:42
=> 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
says:
November 1, 2021 at 10:01
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
says:
November 1, 2021 at 10:33
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
says:
November 2, 2021 at 10:55
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
says:
November 2, 2021 at 11:30
What does the compiler error exactly say? Which theme version do you use?

Effectiva
says:
November 22, 2021 at 16:17
Very nice, thank you!

Comments are closed.

How it works

_bscore_variables.scss

Simple

Advanced

_bscore_custom.scss

CSS

SCSS

Mixins

Extend

WooCommerce Colors

main.scss

Developer mode

Disable environment check

Disable scssphp

Errors

Update Bootstrap

20 Comments on “CSS / SCSS / Compiler”

Lo Rednib

Basti

Lo Rednib

Basti

Lo Rednib

Lo Rednib

Basti

Lo Rednib

Lo Rednib

Basti

Lo Rednib

Lo Rednib

Lo Rednib

Basti

Lo Rednib

dfgdsfgsdf dfsgdsfg

Basti

dfgdsfgsdf dfsgdsfg

Basti

Effectiva