SASS: How to enable only some breakpoints? Also can be created CSS build for mobile and desktop version separatly to load only some css based on media

[suche-cz]

Hello, is there any possibility to load only some breakpoints ?
Currently there are sm-xxl sizes, but I need only sm, md and lg

With this, I also want to build pico for mobile devices and desktop separatly, how to do that?

I can do that by overwriting Pico source files but it's not a good way.

Thank you for any tips.

[asbjornu]

I don't have an answer for breakpoints, but with Sass, you can customize which parts of Pico you use:

@use "pico" with (
  $enable-semantic-container: true,
  $enable-classes: false,
  $modules: (
    "content/code": false,
    "forms/input-color": false,
    "forms/input-date": false,
    "forms/input-file": false,
    "forms/input-range": false,
    "forms/input-search": false,
    "components/accordion": false,
    "components/card": false,
    "components/dropdown": false,
    "components/loading": false,
    "components/modal": false,
    "components/nav": false,
    "components/progress": false,
    "components/tooltip": false,
    "utilities/accessibility": false,
    "utilities/reduce-motion": false
  )
);

You can thus have mobile.scss and desktop.scss each with the above code, tweaking which components and utilities to include.

[Leftium]

I was able to "remove" the xl and xxl breakpoints by setting their breakpoint: value to a setting that would never match (9999px).

I figured out how to add additional items and update existing items to the Pico $breakpoints map, but was unable to figure out how to remove items from the $breakpoints map inside a @use "pico" with statement.

[Leftium]

Here is the code:

@use '@picocss/pico/scss/pico' with (
    // Breakpoints, viewports and root font size
    $breakpoints:
    (
        xl: (
            breakpoint: 9999px,
            viewport: 510px,
            root-font-size: 106.25%
        ),
        xxl: (
            breakpoint: 9999px,
            viewport: 510px,
            root-font-size: 106.25%
        )
    ),
);