At Tepee.pro we use for a long time Sass in our front-end developments. I really like how it helps to write less code and to make styles more readable.

We are now working on a Blog migration from a custom solution based on ReactJS + Prismic.io to a Ghost powered Blog.

The Ghost default theme Casper is a good starting point to create a custom theme so we decide to use it as foundation to the custom Tepee.pro theme.
Casper is using some features of PostCSS but is not using Sass.
So I decided to add Sass support in a Casper theme.

How to add Sass Support in Ghost default theme (Casper)?

Update package.json

First thing to do is to add gulp-sass to devDependencies in package.json

"devDependencies": {
โ€ฆ,
"gulp-sass": "4.0.2 ยป,
โ€ฆ
}

And run npm install to have gulp-sass working.

Switch to Sass files

Then we need to switch from css files (.css) to Sass files (.scss) for our styles.
I just create a "scss" directory in assets folder where I copy the original global.css and screen.css files.
I rename global.css to _global.scss and screen.css to screen.scss.
In Casper "Global" styles are imported in "Screen" styles so I prefer to add _ in the file name so I know it is not used directly in the HTML code but just for import.

Update gulpfile

The original gulpfile works with css folder and compile the .css files.
I update the file to work with .scss files in the scss folder.
Compiling Sass is done before PostCSS processing.

pump([
        gulp.src('assets/scss/*.scss'),
        sass().on('error', sass.logError),
        sourcemaps.init(),
        postcss(processors),
        sourcemaps.write('.'),
        gulp.dest('assets/built/'),
        livereload()
    ], handleError(done));

At this point, Sass files should compile but it was not the case.

Error: argument `$color` of `lightness($color)` must be a color

Following error I found the guilty line:

background: color(var(--color6) lightness(-9%) saturation(-10%));

Remember Sass processing is done first, so lightness function is seen as Sass language function while in our case it is a PostCSS function. In a Sass point of view the signature is not correct.
Thanks for us there is a solution for that. Use a ยซ shortcut ยป version of lightness and saturation.

background: color(var(--primary-color) l(-9%) s(-10%));

โœ… Now the objective of having Sass support in Ghost default theme working is achieved!

Some tips for using Sass and PostCSS together

Different way to use variables

:root {
/* Colours */
--primary-color: #247980;
--accent-color: $accent-color;
--border-width: 10px;
}
$border-width: 100px;

In scss files you can use

border-width: var(--border-width);

or

border-width: $border-width;

Using a sass variable to define a css variable.

I spent a little time on that so I share it with you.

In app code we donโ€™t use (yet) postCSS so our colors are defined as Sass variables.

Letโ€™s say I want to share the list of colors between the app and the blog, it can be useful to use Sass variables to define the css variables.

My initial intuition was to write this code

$primary-color: #247980;
:root {
--accent-color: $accent-color;
}

But it does not work.

Sass variable is not applied


After some research I found that from Sass 3.5.6, you need to use another syntax to use a Sass variable in the :root element

$primary-color: #247980;
:root {
--accent-color: #{$accent-color};
}

This way, it works! ๐ŸŽ‰

Sas variable is applied on PostCSS color

I hope this tips were useful. Happy coding!
If you want to contribute to tepee.pro, contact me on LinkedIn

References:
https://www.ghostforbeginners.com/using-sass-with-ghost/
https://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591