Search code examples
next.jssass

SCSS modules in Next.js

I am using next-int for setting up languages in my next.js project, as usual, I have components that each have a module.scss file, my problem is I do not want to duplicate my scss files to work on my Arabic site styling, the only thing that differs is the alignment and the values of paddings and margins and positions (for example, padding-left:20px becomes padding-right:20px in Arabic, and left:0 becomes right:0 in Arabic) what is the easiest way to tackle this issue? I just want to avoid duplicating my scss files,

I feel like simple variables could solve this but I am not sure how to implement them using next-int.

Solution

  • You should use CSS logical properties. All you need to do is to replace your physical properties with its logical equivalent e.g. padding-left: 20px will become padding-inline-start: 20px. Furthermore it is possible to shorten things e.g.

    padding-left: 20px;
padding-right: 20px;

// can be shorten by
padding-inline: 20px;