Changing SASS options

manalyse · June 21, 2018, 9:47pm

I want to change the amount of decimal points after the period in scss using the --precision option. Any idea on where I should ideally do that?

knowler · June 21, 2018, 9:48pm

Here should work:

github.com

roots/sage/blob/fd2a94fa1b8fa5b4767b5f0f825ec364564d0efa/resources/assets/build/webpack.config.js#L93-L96


loader: 'sass', options: {
  sourceMap: config.enabled.sourceMaps,
  sourceComments: true,
},

manalyse · June 21, 2018, 9:54pm

Hey @knowler, thank you very much! Do I have to include that in the webpack.config.optimize.js and webpack.config.watch.js files as well, if I want that option everywhere? Or is the config enough as long as its not overwritten somewhere else?

knowler · June 21, 2018, 10:00pm

Just webpack.config.js since it is the base config. The watch config only runs during live development and optimize on a production build. They just add a few tasks.

You can run some tests to see if there is a difference between build and build:production, however, I do know from experience that cssnano will preserve the decimal length.

manalyse · June 21, 2018, 10:07pm

Ah, thanks for claryfing that. It works.

I have created (and am creating) a system in sass for typography and vertical rhythm that utilizes musical composition, and need many decimal numbers as musical intervals can get quite messy and I have to convert a lot from px to rem. Thanks a lot for helping!

knowler · June 21, 2018, 10:18pm

That’s so cool. I’ve been trying something similar with Tailwind. Since its config is all JS, I can set the type + spacing scales with a function. I would like to do something similar with color.