A two-stage process can be slower than using PostCSS alone, since much of its work involves tokenizing CSS properties.

However, this speed difference will be less noticeable if you’re already running PostCSS after Sass. PostCSS is pure JavaScript and, while benchmarks will differ, it can be three times slower at compiling the same source code. The slow, Ruby-based Sass compiler has long gone and the latest edition uses a compiled Dart runtime. However, if you’re already using PostCSS for Autoprefixer or other purposes, Sass may not be necessary. Even though PostCSS may not use them, it can’t be considered as a lightweight alternative.

This is mostly npm installing other dependencies. In reality, your node_modules folder will expand to more than 60MB and increase rapidly as more plugins are added. PostCSS should require fewer resources and a basic Sass-like compiler with auto-prefixing, and minification needs less than 1MB of space. The latest version of Sass requires less than 5MB of installation space. Source maps are automatically generated ( -no-source-map will switch them off) or -watch can be added to auto-compile source files when they change.

The latest Dart version of Sass can be installed globally using the Node.js npm package manager: npm install -g sassĬompile Sass. 'utf-8' // Import a Google Font url('') // Set your brand colors $purple : #8A4D76 $pink : #FA7C91 $brown : #757763 $beige-light : #D0D1CD $beige-lighter : #EFF0EB // Update Bulma's global variables $family-sans-serif : 'Nunito', sans-serif $grey-dark : $brown $grey-light : $beige-light $primary : $purple $link : $pink $widescreen-enabled : false $fullhd-enabled : false // Update some of Bulma's component variables $body-background-color : $beige-lighter $control-border-width : 2px $input-border-color : transparent $input-shadow : none // Import only what you need from Bulma './node_modules/bulma/sass/utilities/_all.sass' './node_modules/bulma/sass/base/_all.sass' './node_modules/bulma/sass/elements/button.sass' './node_modules/bulma/sass/elements/container.sass' './node_modules/bulma/sass/elements/title.sass' './node_modules/bulma/sass/form/_all.sass' './node_modules/bulma/sass/components/navbar.sass' './node_modules/bulma/sass/layout/hero.sass' './node_modules/bulma/sass/layout/section.There’s nothing wrong with the Sass compiler, but consider the following factors.

Npm to install sass