Issue
I have implemented the following mixin:
@mixin fancy-container(
$background-color: transparent,
$background-image: null,
$background-position: center,
$background-repeat: no-repeat,
$background-size: cover,
$height: 50vh,
$min-height: 250px,
$parallax: false,
$position: relative,
$overflow: hidden,
$box-shadow: none
) {
background-color: $background-color;
background-image: $background-image;
background-position: $background-position;
background-repeat: $background-repeat;
background-size: $background-size;
height: $height;
min-height: $min-height;
position: $position;
overflow: $overflow;
box-shadow: $box-shadow;
@if $parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
And my idea is to reuse it in order to create the following css effect:
body {
background-image: radial-gradient(#212121 20%, transparent 20%),
radial-gradient(#fafafa 20%, transparent 20%);
background-color: #e53935;
background-position: 0 0, 50px 50px;
background-size: 100px 100px;
}<body></body>This code
@include fancy-container(
$background-image: radial-gradient(#212121 20%, transparent 20%),
radial-gradient(
#fafafa 20%,
transparent 20%,
),
$background-color: $primary,
$background-position: 0 0,
50px 50px,
$background-size: 100px 100px
);
doesn't work. And I get the error Ordinal arguments must precede named arguments. Any ideas?
Solution
Sass thinks that each comma precedes a new parameter in the include. Use #{...} to wrap values that include commas, like this:
@include fancy-container(
$background-image: #{
radial-gradient(#212121 20%, transparent 20%),
radial-gradient(#fafafa 20%, transparent 20%)},
$background-color: $primary,
$background-position: #{0 0, 50px 50px},
$background-size: 100px 100px
);
Answered By - mfluehr
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.