问题
This open issue in the Sass queue seems to imply passing arguments to @content
is not a feature yet, but Susy 2 seems to be able to do this. Tracking down how it's done is a bit of a rabbit hole though and I haven't figured it out yet. Perhaps someone can shed some light with a straightforward example? I want to create a custom mixin that will inherit a layout passed from susy-breakpoint()
using a custom map.
Example: Defining a 4 column layout in a global Sass map, will return a width of 100% when a span of 4 is specified inside susy-breakpoint()
's @content
. When a custom layout of 8 cols is passed to directly tosusy-breakpoint()
via the $layout
argument, the nested span()
mixin picks up the new layout. But a custom nested mixin will not pick up the new layout. Why?
@import 'susy';
$susy: (
columns: 4,
);
@mixin inherit-layout($layout: 4) {
columns: $layout;
}
@include susy-breakpoint(30em) {
// nested code uses an 4-column grid from global map
.global-cols {
@include span(4);
@include inherit-layout();
}
}
@include susy-breakpoint(48em, $layout: 8) {
// nested code uses an 8-column grid from $layout
.inherited-cols {
@include span(4);
@include inherit-layout();
}
}
Compiled CSS:
@media (min-width: 30em) {
.global-cols {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
columns: 4;
}
}
@media (min-width: 48em) {
.inherited-cols {
width: 48.71795%;
float: left;
margin-right: 2.5641%;
columns: 4;
}
}
Update:
I've discovered that making the default variable for the inherit-value()
mixin the value of columns key on the existing $susy
map allows the mixin to grab context. But why? And why doesn't it work with a different map or outside of susy-breakpoint()
?
See here: http://sassmeister.com/gist/d86e217aca3aa8337b83
回答1:
Susy doesn't pass any arguments to the @content
— instead, we change the global variable at the start of the content block, and then change it back at the end:
$example: 4;
@mixin local($local) {
$old: $example;
$example: $local !global;
@content
$example: $old !global;
}
// out here, $example == 4
@include local(12) {
// in here, $example == 12
}
来源:https://stackoverflow.com/questions/29596968/passing-arguments-from-a-mixin-to-a-content-block