Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created September 20, 2016 17:12
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mirisuzanne/9b5ca9df6642173e20058853031b8d88 to your computer and use it in GitHub Desktop.
Save mirisuzanne/9b5ca9df6642173e20058853031b8d88 to your computer and use it in GitHub Desktop.
Changing configurations in Susy 3
// different maps for different configurations...
$susy: (
columns: 4,
);
$medium: (
columns: 8,
);
$large: (
columns: 12,
);
// inline use
// (you can pass any config into the Susy functions)
.example {
width: span(2);
@media (min-width: 30em) {
width: span(6, $medium);
}
}
// block mixin
// change settings for a block of content
// (maybe we should add this to the Susy core?)
@mixin susy-settings-block($config) {
// store the old settings
$global: $susy;
// apply the new settings
$susy: map-merge($susy, $config) !global;
// allow nested styles, using new settings
@content;
// return to the initial settings
$susy: $global !global;
}
// block use
// (applies the new config to an entire section of code)
@media (min-width: 30em) {
@include susy-settings-block($medium) {
.example {
width: span(6);
}
.example-2 {
width: span(3);
}
}
}
@rizqinizamil
Copy link

So sorry @mirisuzanne. That's all my fault :(. You are right it can be done by the old mixins.
Thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment