Created
September 20, 2016 17:12
-
-
Save mirisuzanne/9b5ca9df6642173e20058853031b8d88 to your computer and use it in GitHub Desktop.
Changing configurations in Susy 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So sorry @mirisuzanne. That's all my fault :(. You are right it can be done by the old mixins.
Thank you so much!