Generated by SassMeister.com.

SassMeister-input-HTML.haml

#foo

#bar

#repeating

#repeating2

#repeating3

SassMeister-input.sass

// ----
// libsass (v3.2.5)
// ----

body
 display: flex
 flex-flow: row wrap
div
  width: 50%
  height: 30vh
  margin-bottom: 2.5vh
  
#foo
  background: linear-gradient(#fb3 50%, #58a 0)
  background-size: 100% 30px
  
#bar
  background: linear-gradient( to right, #fb3 50%, #58a 0)
  background-size: 30px 100%
  
#repeating
  background: repeating-linear-gradient(45deg, #fb3, #58a 30px)

#repeating2
  background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0,  #58a 30px)

#repeating3
  background: repeating-linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%)
  background-size: 42.426406871px 42.426406871px

SassMeister-output.css

body {
  display: flex;
  flex-flow: row wrap;
}

div {
  width: 50%;
  height: 30vh;
  margin-bottom: 2.5vh;
}

#foo {
  background: linear-gradient(#fb3 50%, #58a 0);
  background-size: 100% 30px;
}

#bar {
  background: linear-gradient(to right, #fb3 50%, #58a 0);
  background-size: 30px 100%;
}

#repeating {
  background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
}

#repeating2 {
  background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}

#repeating3 {
  background: repeating-linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);
  background-size: 42.42641px 42.42641px;
}

SassMeister-rendered.html

<div id='foo'></div>
<div id='bar'></div>
<div id='repeating'></div>
<div id='repeating2'></div>
<div id='repeating3'></div>