SCSS Variables - Same Name, Different Meaning At Different Media Breakpoints
I am creating an SCSS grid with a specific problem - I would like to use the same variable name, for example $pad
(for padding values), but the variable $pad
should be different at different breakpoints.
The value of a variable is first set through mixins, which dynamically create breakpoints and set their value $pad
.
// Default value
$pad: 0;
@mixin resolution($breakpointName, someOtherValues) {
@if ($breakpointName == 'mobile') {
@media (min-width: 320px) and (max-width: 520px) {
$pad: 20px;
@content;
}
}
@else {
@media (min-width: 521px) {
$pad: 30px;
@content;
}
}
}
When I start writing code, I would like to use it like this
@include resolution(mobile) {
.test {
padding: $pad;
}
}
Here's the problem. When using libsass (NPM gulp-sass) the variable $pad
is passed as I assumed and it outputs the following CSS
// THIS IS OK - gulp-sass
@media (min-width: 320px) and (max-width: 520px) {
.test {
padding: 20px;
}
}
But if I use the latest Ruby SASS to compile CSS through NPM gulp-ruby-sass it only outputs the default value for $pad
// THIS IS WRONG - gulp-ruby-sass
@media (min-width: 320px) and (max-width: 520px) {
.test {
padding: 0;
}
}
Where is the problem? Is this my idea or is it a bug in libsass or ruby sass? If my idea is a problem, is there a way to achieve what I wanted in some way?
source to share
Ruby Sass is right. Your value should be 0.
LibSass tends to lag behind in performance and behavior. This is an emulation of the behavior of Sass 3.3, which freely has access to global variables from within mixins / functions. There is no way to do this that will work with both Sass 3.4 and LibSass. The syntax that must be used to access global variables is not backward compatible.
Either go to Sass 3.3 (and live with deprecated warnings), or forget about using LibSass.
Your Mixin should look like this for Sass 3.4 to work as desired:
@mixin resolution($breakpointName) {
@if ($breakpointName == 'mobile') {
@media (min-width: 320px) and (max-width: 520px) {
$pad: 20px !global;
@content;
}
}
@else {
@media (min-width: 521px) {
$pad: 30px !global;
@content;
}
}
}
source to share