Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

Usage with Sass

This guide will explain how to use Sass in combination with postcss-preset-mantine. Note that examples on mantine.dev website use only postcss-preset-mantine – you will need to modify them to use with Sass.

Sass modules

You can use Sass modules the same way as CSS modules:

  • Use *.module.scss/*.module.sass extension for your files to enable modules
  • Use *.scss/*.sass extension for global styles

Usage with Vite

Install sass:

yarn add --dev sass

Add mantine resources in your vite.config.js file:

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/_mantine";`,
      },
    },
  },
});

Create _mantine.scss file in your src folder:

@use 'sass:math';

// Define variables for your breakpoints,
// values must be the same as in your theme
$mantine-breakpoint-xs: '36em';
$mantine-breakpoint-sm: '48em';
$mantine-breakpoint-md: '62em';
$mantine-breakpoint-lg: '75em';
$mantine-breakpoint-xl: '88em';

@function rem($value) {
  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
}

@mixin light {
  [data-mantine-color-scheme='light'] & {
    @content;
  }
}

@mixin dark {
  [data-mantine-color-scheme='dark'] & {
    @content;
  }
}

@mixin hover {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }

  @media (hover: none) {
    &:active {
      @content;
    }
  }
}

@mixin smaller-than($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
}

@mixin larger-than($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// Add direction mixins if you need rtl support
@mixin rtl {
  [dir='rtl'] & {
    @content;
  }
}

@mixin ltr {
  [dir='ltr'] & {
    @content;
  }
}

All done! you can now use breakpoint variables, rem function, hover, light/dark mixins:

// example.module.scss
.title {
  color: light-dark(
    var(--mantine-color-black),
    var(--mantine-color-white)
  );
  font-size: rem(100px);
  font-weight: 900;
  letter-spacing: rem(-2px);

  @include light {
    background-color: red;
  }

  @include dark {
    background-color: blue;
  }

  @include smaller-than($mantine-breakpoint-md) {
    font-size: rem(50px);
  }
}

Usage with Next.js

Install sass:

yarn add --dev sass

Add mantine resources in your next.config.mjs file:

export default {
  // ...other config
  sassOptions: {
    prependData: `@import "./_mantine.scss";`,
  },
};

Create _mantine.scss file in the root folder of your project:

@use 'sass:math';

// Define variables for your breakpoints,
// values must be the same as in your theme
$mantine-breakpoint-xs: '36em';
$mantine-breakpoint-sm: '48em';
$mantine-breakpoint-md: '62em';
$mantine-breakpoint-lg: '75em';
$mantine-breakpoint-xl: '88em';

@function rem($value) {
  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
}

@mixin light {
  [data-mantine-color-scheme='light'] & {
    @content;
  }
}

@mixin dark {
  [data-mantine-color-scheme='dark'] & {
    @content;
  }
}

@mixin hover {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }

  @media (hover: none) {
    &:active {
      @content;
    }
  }
}

@mixin smaller-than($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
}

@mixin larger-than($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// Add direction mixins if you need rtl support
@mixin rtl {
  [dir='rtl'] & {
    @content;
  }
}

@mixin ltr {
  [dir='ltr'] & {
    @content;
  }
}

All done! you can now use breakpoint variables, rem function, hover, light/dark mixins:

// example.module.scss
.title {
  color: light-dark(
    var(--mantine-color-black),
    var(--mantine-color-white)
  );
  font-size: rem(100px);
  font-weight: 900;
  letter-spacing: rem(-2px);

  @include light {
    background-color: red;
  }

  @include dark {
    background-color: blue;
  }

  @include smaller-than($mantine-breakpoint-md) {
    font-size: rem(50px);
  }
}

Previous

PostCSS preset

Next

Vanilla extract

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people