Working with SCSS

Working with SCSS

Canvas ships its full SASS source so you can change colors, spacing, typography, and component styles at the source and recompile a single style.css. Editing variables is the recommended way to rebrand the template without overriding compiled CSS.

Structure

The SASS lives in the sass/ folder and is assembled by the root style.scss. style.scss imports the partials in order: variables and mixins first, then Bootstrap, core CSS, content blocks, shortcodes, forms, and plugins.

style.scss              # master file that @imports everything
sass/
  _variables.scss       # colors, fonts, sizes: edit this first
  _mixins.scss
  bootstrap/            # bundled Bootstrap source
  _root.scss
  _layouts.scss
  _typography.scss
  _utilities.scss
  _header.scss
  _sliders.scss
  _content.scss
  _forms.scss
  _footer.scss
  _shortcodes.scss      # @imports the shortcodes/ partials
  shortcodes/
    _buttons.scss
    _pricing.scss
    _carousel.scss
    ... (one partial per shortcode)

The top of style.scss shows the import chain:

// Initialize
@import "sass/variables";
@import "sass/mixins";

// Bootstrap
@import "sass/bootstrap/bootstrap";

// Core CSS
@import "sass/root";
@import "sass/layouts";
@import "sass/typography";
@import "sass/utilities";

// Content Blocks
@import "sass/header";
@import "sass/sliders";

// Shortcodes
@import "sass/shortcodes";

// Forms
@import "sass/forms";

Setup

Edit variables in sass/_variables.scss, then recompile with the bundled Gulp tasks defined in gulpfile.js.

// sass/_variables.scss
$slider-caption-width       : 550px;
$slider-caption-font-size   : 1.375rem;
$slider-caption-font-weight : 300;

Install dependencies once, then run the SCSS compile task. The scsscompile task compiles style.scss to style.css (and generates the RTL stylesheet):

npm install
npx gulp scsscompile

The compile pipeline reads ./style.scss, runs SASS, concatenates to ./style.css, and applies autoprefixer:

function compileSCSS() {
  return gulp.src('./style.scss', { sourcemaps: true })
    .pipe(plumber())
    .pipe(sass({ silenceDeprecations: silencedSassDeprecations }).on('error', sass.logError))
    .pipe(concat('./style.css'))
    .pipe(postcss([ autoprefixer() ]))
    .pipe(gulp.dest('./', { sourcemaps: '.' }));
}

exports.scsscompile = series(compileSCSS, convertRTL);

Available Gulp tasks

Defined at the bottom of gulpfile.js:

• gulp scsscompile: compile style.scss to style.css and produce the RTL stylesheet.
• gulp rtl: convert the compiled CSS to RTL only.
• gulp cssminify: minify the compiled CSS.
• gulp jsminify / gulp minify: minify JS, or CSS and JS together.
• gulp buildjs: concatenate and build the bundled JS (plugins and functions).
• gulp watch: watch source files and rebuild on change.

Tips

• Change variables in sass/_variables.scss rather than editing style.css directly, so your customizations survive a recompile.
• To restyle a single shortcode, edit its partial under sass/shortcodes/ (for example _pricing.scss), then run gulp scsscompile.
• Use gulp watch while developing so style.css rebuilds automatically as you save SCSS files.