我正在努力从@mixin 中将$ 变量传递/获取到@content。我在网上广泛阅读了有关它的信息,并且知道这是不可能的。但也许有人知道一个好的变化和/或其他解决方案。
我创建了一个 SassMeister 文件来解释它:https ://www.sassmeister.com/gist/f5404131ace6e243ef0a6c9cca042889
谁能帮帮我?感谢您与我们联系;-)
我正在努力从@mixin 中将$ 变量传递/获取到@content。我在网上广泛阅读了有关它的信息,并且知道这是不可能的。但也许有人知道一个好的变化和/或其他解决方案。
我创建了一个 SassMeister 文件来解释它:https ://www.sassmeister.com/gist/f5404131ace6e243ef0a6c9cca042889
谁能帮帮我?感谢您与我们联系;-)
最近可以做到这一点,但这是一个非常新的功能,并且确实取决于您使用的 Sass 版本。(我使用最新的 dart-sass 让它工作)
语法是这样的
@mixin test-mixin() {
$var: 10px;
@content($var);
}
@include test-mixin() using ($var) {
margin-top: $var;
}
您可以将多个变量传递给内容块,但有一些警告。
我不知道这是否是最好的方法,但您可以创建一个全局变量,在每个循环中更改它并使用它。像这样的东西:
$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;
}
}