Создание линейного градиента в цикле for в SCSS

Я написал миксин для создания фона с 4 параллельными линиями любого размера и под любым углом в любом положении, воспользовавшись linear-gradient, однако мне интересно, есть ли способ сделать его более динамичным?

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

Это создает что-то вроде этого, если задан угол -45deg с зазором 5px и шириной 10px:

Фон имеет 4 линии под углом

Однако в настоящее время, если бы я хотел удвоить количество строк, мне пришлось бы скопировать и вставить linear-gradient, чтобы увеличить фоновый элемент.

Есть ли способ, которым я мог бы зациклиться n раз и создать этот длинный линейный градиент?

Если бы я зациклился, я бы использовал что-то вроде этого. Этот пример не работает, но я бы подошел к нему так:

$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
}

Я даже не уверен, возможно ли это, так как я не думаю, что вы можете объединить значения свойств, но я подумал, что все равно спрошу.

codeandbox: https://codesandbox.io/s/nostalgic-diffie-yxzgo?file=/src/styles.scss

Спасибо!

Правка (08.12.20): Объединение ответов Темани Афифа и Монзура Тамала привело меня к желаемому результату. Вот миксин, который работает для меня без жесткого кодирования какой-либо ширины:

@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;
  }
}

css sass scss-mixins linear-gradients
person pfych    schedule 10.08.2020    source источник
comment
не могли бы вы воссоздать его здесь. codesandbox.io/s/blazing-dust-o5lxl?file =/src/styles.scss   -  person Monzoor Tamal    schedule 10.08.2020
comment
обновил вопрос, чтобы включить ссылку на песочницу   -  person pfych    schedule 11.08.2020

Ответы (2)


arrow_upward
1
arrow_downward

Я бы сделал это, используя другое, где было бы легче справиться без SASS. Вам нужно только настроить переменные 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>

person Temani Afif    schedule 10.08.2020

arrow_upward
1
arrow_downward 

@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)
}

все, что вам нужно, чтобы изменить $contentWidth размер. дайте мне знать, если это поможет.

песочница

person Monzoor Tamal    schedule 11.08.2020