CODEWITHSUNDEEP
csssass
CharlyAnderson
CharlyAnderson

Reputation: 737

Use a mixins to change variable value

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?

Upvotes: 1

Views: 2811

Answers (3)

disinfor
disinfor

Reputation: 11558

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();
     }
}

Upvotes: 0

Jinu Kurian
Jinu Kurian

Reputation: 9426

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

Upvotes: 2

Nagaraj Raveendran
Nagaraj Raveendran

Reputation: 1235

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

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

Upvotes: 0

Related Questions