Htykuut

I'm trying to generate a general structure of styles on scss with global breakpoints as media queries on a react project, It is possible to reuse an structure to follow media queries that we declare as global.
I'm a little bit lost on this one, any ideas?

When I mean global is that we can define the breakpoints at the root of the project and we can use any reference on the components.

Thanks in advance.

There are three ways that come to mind:

1. You can create a variables.scss file in which you can write the value of your breakpoints:

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

And the use the following variables in your scss:

@media only screen and (min-width: $sm) {

    .container {

        .max-width: 450px;

    }

}

@media only screen and (min-width: $md) {

    .container {

        .max-width: 650px;

    }

}

@media only screen and (min-width: $lg) {

    .container {

        .max-width: 900px;

    }

}

@media only screen and (min-width: $xl) {

    .container {

        .max-width: 1000px;

    }

}

2. 
   

   Or you can the mentioned variables in your mixins.scss file to create some media query mixins:

   
   
   

   @mixin small {
@media only screen and (min-width: $sm) {
@content;
}
}

   
   

And then, use these mixins in your main scss codes:

.container {

    @include small {

        max-width: 450px;

    }

    ...

}

3. 
   

   Or if the use cases of these media queries are limited (e.g. hiding and showing elements), you can define other mixins that include all the variations:

   
   
   

   $displays: none inline inline-block block table table-cell table-row flex inline-flex;
$sizes: (
sm: $sm,
md: $md,
lg: $lg,
lg: $xl
);
@each $display in $displays:
@each $size-key $size in $sizes {
.display-#{size-key}-#{display} {
display: $display !important;
}
}
}

   
   

A note on importing files: I personally would import all my helper scss (variables, mixins, etc.) in a file called styles/index.scss in the root of my project among with normalizing and other global rules that I want to define, and then import this file in my other scss files:

// styles/index.scss

@import './variables.scss';

@import './mixins.scss';

...



// container.scss

@import './styles/index.scss';