Overwriting the $breakpoints SCSS map.

[rlaven]

Hi,

Can you tell me how i can override the $breakpoints sass map. There is no way for me now to change the breakpoints and have the grid also use the newly updated $breakpoints i have defined.

So for example: If i wish to change the xl breakpoint to let's say 120rem (~1920px). I cannot do so in a way that the grid classes also use this new breakpoint. .col-6@xl will still become a col-6 on 90rem, not on 120rem.

[sebastiano-guerriero]

Hi there 👋 I'd suggest to create a _breakpoints.scss file inside the 'custom-style' folder, and override the SASS maps with the following snippet:

$breakpoints: (
  xs: 32rem, // ~512px
  sm: 48rem, // ~768px
  md: 64rem, // ~1024px
  lg: 80rem, // ~1280px
  xl: 90rem  // ~1440px
);

Also, don't forget to import the new _breakpoints.scss file into the _custom-style.scss file.

The col classes take the values from the SASS map, therefore they should update automatically if you edit the SASS map.

[rlaven]

Hi,

When you take a look at https://github.com/CodyHouse/codyhouse-framework/blob/master/main/assets/css/base/_breakpoints.scss#L7. The custom SASS map that i create will be overwritten again by the declaration of the SASS MAP inside this file. So this makes it impossible for me to import the _base.scss from the framework and build upon it further.

For example, the following construction will not work:

@import '../../node_modules/codyhouse-framework/main/assets/css/base';
@import '_custom-style';

[claudia-romano]

Hi @rlaven thanks for the clarification. I see your point. So the solution could be: 1) define your custom $breakpoints before importing the base style: https://www.dropbox.com/s/04wh88wzc6d5ejs/Screenshot%202019-08-26%2012.37.56.png?dl=0 2) In the base/_breakpoints.scss, you would need to add a !default to the $breakpoints declaration: https://www.dropbox.com/s/kk9o7jtonyxrgvt/Screenshot%202019-08-26%2012.39.51.png?dl=0

We'll include this change in the next release of the framework so that you won't need to manually update the framework files anymore. Let me know if you have any questions.

[rlaven]

Hi @claudia-romano,

Yes this is exactly as I would imagine it to work. Looking forward to the next release. Thanks for clarifying.