Use a mixins to change variable value

Question

I am generally quite new to sass and just wondered if it possible to define a new variable value, using mixins?

I thought it would be good to use a variable to define the padding size throughout the website I am building. The idea being that I could then use a mixin and media queries to define a new value.

An example might make more sense:

$site-padding:  40px;

@include media-over-767 {
    $site-padding: 20px;
}

I think this would be super useful but cannot get it to work... is there a method that works?

Even if @JinuKurian already answered, I think you should take a look at scoped variables in sass which may put you on another path to solve these sort of issues. Also, see the answer of [this thread](http://stackoverflow.com/questions/5469931/sass-variable-default-scope) for more details about how variables works (mixins and scoped variables). — Fahrenheit, Apr 04 '17 at 06:28

score 2 · Answer 1 · edited May 23 '17 at 12:25

2

You can't set a sass variable inside a breakpoint.

refer this issue - https://github.com/sass/sass/issues/1227

You could simply do

$site-padding:  40px;
$site-padding-sm:  20px;

@include media-over-767 {
    padding: $site-padding-sm;
}

refer this too - Using Sass Variables with CSS3 Media Queries

edited May 23 '17 at 12:25

Community

1
1

answered Apr 04 '17 at 03:58

Jinu Kurian

9,128
3
27
35

score 0 · Answer 2 · answered Apr 03 '17 at 20:25

0

@mixin site-padding{
   $site-padding: 20px;
}

@include media-over-767 {
    @include site-padding;
}

answered Apr 03 '17 at 20:25

Nagaraj Raveendran

1,150
15
23

How does site-padding translate to padding? Is there another mixin that breaks this down to adding a `padding: 20px`? I have not run into this previously with sass. – gwally Apr 03 '17 at 20:36
1

The padding question is irrelevant to the answer, but if you need a mixin you could use to set the padding, here you go. @mixin padding-all($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } – Nagaraj Raveendran Apr 03 '17 at 20:52
Thank you for the clarification and example. – gwally Apr 03 '17 at 21:31

score 0 · Answer 3 · answered Apr 04 '17 at 04:43

I'm not sure if this is exactly what your looking for, but hopefully it gets you on the right path. Declare the mixin:

@mixin site-padding($padding:40px) {
    padding: $padding;
}

In that example, I set the mixin site-padding with a default value of 40px.

Your SASS would look something like this:

.element {
     // Small screens
     @include site-padding(20px);

     // Over 767px
     @media screen and (min-width: 768px) {
        // Defaults to 40px. 
        @include site-padding();
     }
}

Use a mixins to change variable value

3 Answers3