Different value in SCSS variable if using function for setting value

Question

I have a util scss file for my breakpoints to reuse them through my Angular project:

$breakpoints: (
    sm: 768px,
    md: 1024px,
    lg: 1280px,
    xl: 1400px
);

$bp-sm: get-bp('sm');
$bp-md: get-bp('md');
$bp-lg: get-bp('lg');
$bp-xl: get-bp('xl');

@function get-bp($bp) {
    @if $bp {
        $bp: map-get($breakpoints, $bp);
    } @else {
        @error "Parameter #{$bp} is unknown or empty.";
    }

    @return $bp;
}

I have a list of breakpoints. I need the function for another util file, where I loop through the list and render media queries for each breakpoint. The scss variables are used for hardcoded media queries in an Angular component styling. So I try to set the value of the variable by also calling the function, so I avoid redundancy for the values and use the same list.

.logo {
    width: 250px;

    @media (min-width: $bp-md) {
        width: 650px;
    }
}

.button {
    padding: 20px;

    @media (min-width: $bp-md) {
        padding: 50px;
    }
}

My problem is, when checking my compiled css for the logo the media query looks like this: @media (min-width: 1024px) {...} (so it has the expected value, but for my button it looks like this: @media (min-width: get-bp('md')) {...} (so it does not map the value it shows the function call as value). Both are independent Angular components importing the breakpoint util.

So my question, is it possible to assign values to scss variables by calling a function? And why does it work for one component but on the other it doesn't work? I know I could do it with map-get(), but I do this already in the function so it would be also somehow redundant.

try to find a place where .button can be overriden

StepUp
– StepUp

2021-04-14 11:35:15 +00:00
Commented Apr 14, 2021 at 11:35 — StepUp
– StepUp, Commented Apr 14, 2021 at 11:35

Brebber · Accepted Answer · 2021-04-14 11:55:10Z

2

In SASS the function needs to be declared BEFORE it is used. As in your example it is not $bp-sm: get-bp('sm') doesn't know that you want to call a function and advices a string to the variable.

Solution: just write variables AFTER the function declaration. That code should work:

// ### SASS: 

$breakpoints: (
    sm: 768px,
    md: 1024px,
    lg: 1280px,
    xl: 1400px
);


// function-declaration FIRST:
@function get-bp($bp) {
    @if $bp {
        $bp: map-get($breakpoints, $bp);
    } @else {
        @error "Parameter #{$bp} is unknown or empty.";
    }

    @return $bp;
}

// variables settings with function call 
// AFTER FUNCTION DECLARATION
$bp-sm: get-bp('sm');
$bp-md: get-bp('md');
$bp-lg: get-bp('lg');
$bp-xl: get-bp('xl');



.logo {
    width: 250px;

    @media (min-width: $bp-md) {
        width: 650px;
    }
}

.button {
    padding: 20px;

    @media (min-width: $bp-md) {
        padding: 50px;
    }
}
  

// ### compiles to CSS

.logo {
  width: 250px;
}
@media (min-width: 1024px) {
  .logo {
    width: 650px;
  }
}

.button {
  padding: 20px;
}
@media (min-width: 1024px) {
  .button {
    padding: 50px;
  }
}

answered Apr 14, 2021 at 11:55

Brebber

3,1142 gold badges12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

webta.st.ic Over a year ago

Damn, this was also what I thought I could be and I'm sure I tried it out but it didn't work. Maybe it was a caching problem, since changing it like you said and full-reload in browser it works now! Nice to know thanks mate!

Brebber Over a year ago

Yeah ... I think we all know such situations ... I personal for sure know exactly that ... everytime again trying to resist biting the board ;-)

Mahdi Zarei · Accepted Answer · 2021-04-14 11:31:56Z

1

the order of css lines are important. you should place your functions in global scope and use that in the following lines. tell me if this solution worked.

answered Apr 14, 2021 at 11:31

Mahdi Zarei

7,7538 gold badges36 silver badges67 bronze badges

Comments

StepUp · Accepted Answer · 2021-04-14 11:37:15Z

1

It is too big for comment, however I would rewrite query like this:

@media (min-width: $bp-md) {
    .button {
            padding: 50px;
    }
    
    .logo {
        width: 650px;
    }
}

answered Apr 14, 2021 at 11:37

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Collectives™ on Stack Overflow

Different value in SCSS variable if using function for setting value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related