将参数从mixin传递到内容块 [英] Passing arguments from a mixin to a content block

问题描述

此 Sass队列中的未解决问题似乎意味着将参数传递给@content尚未提供此功能，但是 Susy 2 似乎可以做到这一点.跟踪它的完成方式虽然有点麻烦，但我还没有弄清楚.也许有人可以通过一个简单的例子来说明一些问题?我想创建一个自定义的mixin，它将使用自定义映射继承从susy-breakpoint()传递的布局.

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.

示例:在susy-breakpoint()的@content内指定跨度为4时，在全局Sass映射中定义4列布局将返回100％的宽度.当通过$layout参数将8个cols的自定义布局直接传递给susy-breakpoint()时，嵌套的span() mixin将采用新的布局.但是自定义嵌套的mixin不会采用新的布局.为什么?

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

已编译的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;
  }
}

更新:

我发现，将inherit-value() mixin的默认变量设置为现有$susy映射上的column键的值可以使mixin捕获上下文.但为什么?为什么它不能在其他地图上或susy-breakpoint()之外使用?

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()?

请参阅此处: http://sassmeister.com/gist/d86e217aca3aa8337b83

推荐答案

Susy不会将任何参数传递给@content —相反，我们在内容块的开头更改了全局变量，然后将其改回最后:

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
}

这篇关于将参数从mixin传递到内容块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！