[英]Generate linear gradient in a for loop in SCSS
I Have written a mixin to create for a background with 4 side-by-side lines at any size and any angle at any position by taking advantage of linear-gradient
however I am wondering if there would be a way to make it more dynamic?我已经编写了一个mixin,通过利用linear-gradient
来创建具有任意大小和任意角度的4条并排线的背景,但我想知道是否有办法让它更具动态性?
@mixin corner-lines($start, $gap, $width, $angle, $colour) {
background:
linear-gradient($angle,
#0000 $start,
#0000 calc(#{$start} + #{$gap}),
$colour calc(#{$start} + #{$gap}),
$colour calc(#{$start} + (#{$gap} * 2) + #{$width}),
#0000 calc(#{$start} + (#{$gap} * 2) + #{$width}),
#0000 calc(#{$start} + (#{$gap} * 3) + #{$width})),
linear-gradient($angle,
#0000 calc(#{$start} + (#{$gap} * 4) + #{$width}),
#0000 calc(#{$start} + (#{$gap} * 5) + #{$width}),
$colour calc(#{$start} + (#{$gap} * 5) + #{$width}),
$colour calc(#{$start} + (#{$gap} * 6) + (#{$width} * 2)),
#0000 calc(#{$start} + (#{$gap} * 6) + (#{$width} * 2)),
#0000 calc(#{$start} + (#{$gap} * 7) + (#{$width} * 2))),
linear-gradient($angle,
#0000 calc(#{$start} + (#{$gap} * 8) + (#{$width} * 2)),
#0000 calc(#{$start} + (#{$gap} * 9) + (#{$width} * 2)),
$colour calc(#{$start} + (#{$gap} * 9) + (#{$width} * 2)),
$colour calc(#{$start} + (#{$gap} * 10) + (#{$width} * 3)),
#0000 calc(#{$start} + (#{$gap} * 10) + (#{$width} * 3)),
#0000 calc(#{$start} + (#{$gap} * 11) + (#{$width} * 3))),
linear-gradient($angle,
#0000 calc(#{$start} + (#{$gap} * 12) + (#{$width} * 3)),
#0000 calc(#{$start} + (#{$gap} * 13) + (#{$width} * 3)),
$colour calc(#{$start} + (#{$gap} * 13) + (#{$width} * 3)),
$colour calc(#{$start} + (#{$gap} * 14) + (#{$width} * 4)),
#0000 calc(#{$start} + (#{$gap} * 14) + (#{$width} * 4)),
#0000 calc(#{$start} + (#{$gap} * 15) + (#{$width} * 4)));
}
This creates something like this if given an angle of -45deg
with a gap of 5px
and a width of 10px
:如果给定的角度为-45deg
,间隙为5px
,宽度为10px
,则会产生类似这样的效果:
Currently however if I wanted to double the number of lines I'd have to copy-paste the linear-gradient
to make the background element larger但是,目前如果我想将行数增加一倍,我必须复制粘贴linear-gradient
以使背景元素更大
Is there a way I could loop n
times and generate this long linear gradient?有没有办法可以循环n
次并生成这个长的线性渐变?
If I looped I'd use something like this, This example doesnt work but It'd be how I'd approach it:如果我循环我会使用这样的东西,这个例子不起作用,但这就是我处理它的方式:
$my-var: "someValue";
@while $i <= (#{$steps} * 4) {
$my-var: $my-var + linear-gradient($angle,
#0000 calc(#{$start} + (#{$gap} * #{$i}) + (#{$width} * $i)),
#0000 calc(#{$start} + (#{$gap} * (#{$i} + 1)) + (#{$width} * #{$i})),
$colour calc(#{$start} + (#{$gap} * (#{$i} + 1)) + (#{$width} * #{$i})),
$colour calc(#{$start} + (#{$gap} * (#{$i} + 2)) + (#{$width} * (#{$i} + 1))),
#0000 calc(#{$start} + (#{$gap} * (#{$i} + 2)) + (#{$width} * (#{$i} + 1))),
#0000 calc(#{$start} + (#{$gap} * (#{$i} + 3)) + (#{$width} * (#{$i} + 1))));
$i: $i + 4
}
I'm not even sure if this is possible since I don't think you can concat property values but I thought I'd ask anyway.我什至不确定这是否可能,因为我认为您无法连接属性值,但我想我还是会问。
codesandbox: https://codesandbox.io/s/nostalgic-diffie-yxzgo?file=/src/styles.scss代码沙盒: https://codesandbox.io/s/nostalgic-diffie-yxzgo?file=/src/styles.scss
Thanks!谢谢!
Edit (12/08/20): Combining both Temani Afif's & Monzoor Tamal's answers got me to the desired outcome.编辑(20 年 12 月 8 日):结合 Temani Afif 和 Monzoor Tamal 的答案让我得到了预期的结果。 Here is a mixin that works for me without hard coding any widths:这是一个对我有用的mixin,无需对任何宽度进行硬编码:
@mixin corner-lines($gap, $width, $n, $color) {
position: relative;
&::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: calc(#{$n} * (#{$width} + #{$gap}));
background:
repeating-linear-gradient(90deg,
transparent 0 #{$gap},
#{$color} 0 calc(#{$gap} + #{$width}));
content: '';
transform: skew(-45deg);
transform-origin: top;
}
}
I would do this using a different where it would easier to handle without SASS.我会使用不同的方法来做到这一点,如果没有 SASS,它会更容易处理。 You only need to adjust the CSS variables to control the gradient:您只需要调整 CSS 变量来控制梯度:
.box { width:200px; height:200px; display:inline-block; background:pink; }.gradient { --n:3; --gap:15px; --width:20px; --color:red; position:relative; z-index:0; overflow:hidden; }.gradient::before { content:""; position:absolute; top:0; left:0; bottom:0; width:calc(var(--n)*(var(--width) + var(--gap))); background: repeating-linear-gradient(90deg, transparent 0 var(--gap), var(--color) 0 calc(var(--gap) + var(--width))); transform:skew(-45deg); transform-origin:top; }
<div class="box gradient"></div> <div class="box gradient" style="--n:5"></div> <div class="box gradient" style="--n:2;--width:30px;--color:blue;"></div> <div class="box gradient" style="--n:4;--gap:20px;--width:25px;--color:yellow;"></div>
@mixin stripe($startColor, $endColor, $stripeAngel: -45, $stripeSize: 20px, $contentWidth: 100px, $contentAngel: 135,) {
background:
linear-gradient(
#{$contentAngel}deg,
rgba(255, 255, 255, 0.0) $contentWidth,
rgb(255, 255, 255) 0),
repeating-linear-gradient(
#{$stripeAngel}deg,
$startColor,
$startColor $stripeSize,
$endColor $stripeSize,
$endColor $stripeSize * 2);
}
.tt {
height: 100vh;
padding: 5em;
// @include corner-lines(90%, 5px, 10px, -45deg, red)
@include stripe(red, #ffffff, -45, 20px, 100px, 135)
}
all you need to change $contentWidth
size.您只需要更改$contentWidth
大小。 let me know if it helps.让我知道它是否有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.