SASS - 将 $variable 从@mixin 中传递给@content

Posted

技术标签:

【中文标题】SASS - 将 $variable 从@mixin 中传递给@content【英文标题】:SASS - Pass $variable to @content from within a @mixin 【发布时间】:2018-12-30 14:20:35 【问题描述】:

我正在努力从@mixin 中将$ 变量传递/获取到@content。 我在网上广泛阅读了有关它的信息,并且知道这是不可能的。但也许有人知道一个好的变体和/或其他解决方案。

我创建了一个 SassMeister 文件来解释它:https://www.sassmeister.com/gist/f5404131ace6e243ef0a6c9cca042889

谁能帮帮我?感谢您与我们联系;-)

【问题讨论】:

【参考方案1】:

最近可以做到这一点,但这是一个非常新的功能,并且确实取决于您使用的 Sass 版本。 (我使用最新的 dart-sass 让它工作)

语法是这样的

@mixin test-mixin()  
  $var: 10px;
  @content($var);


@include test-mixin() using ($var) 
  margin-top: $var;

您可以将多个变量传递给内容块,但有some caveats。

【讨论】:

【参考方案2】:

我不知道这是否是最好的方法,但您可以创建一个全局变量,在每个循环中更改它并使用它。像这样的:

$color-1: #333;
$color-2: #0073BD;
$myvariable:0;


$numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

$orientations: left, right, top, bottom;

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
);

@mixin breakpoint($breakpoint) 
  $breakpoint: map-get($breakpoints, $breakpoint);
  @media (min-width: $breakpoint) 
    @content;
  


@mixin breakpoints($get-numbers: false) 
  @content;
  $breakpoints: map-keys($breakpoints);
  @each $breakpoint in $breakpoints 
    @include breakpoint($breakpoint) 
      @if $get-numbers == true 
        @each $number in $numbers 
          &-#$number-#$breakpoint 
            $myvariable: $number !global;
            @content;
          
        
       @else 
        &-#$breakpoint 
          @content;
        
      
    
  


.u-margin 
  @include breakpoints(true) 
    content: "Test to get the #$myvariable variable";
    margin:$myvariable * 1rem;
    // How can I get the $number variable here?
    //margin: $number * 1rem;
  

【讨论】:

以上是关于SASS - 将 $variable 从@mixin 中传递给@content的主要内容,如果未能解决你的问题,请参考以下文章

将字符串传递给 sass mixin 中的变量

从 Bulma SASS 中删除未使用的颜色

Bootstrap-Sass 源码解析二:Variables.scss

Bootstrap-Sass 源码解析二:Variables.scss

Bootstrap-Sass 源码解析二:Variables.scss

我可以将 LESS 文件导入 SASS 吗?