Sass Test Output

test.css

.container {
  height: 100vh;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22%23338%22%20width%3D%2225%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%25%22%20fill%3D%22%232b2b74%22%20width%3D%2225%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%23338%22%20width%3D%2225%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2275%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2275%25%22%20fill%3D%22%232b2b74%22%20width%3D%2225%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}

@media (min-width: 700px) {
  .container {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22%23338%22%20width%3D%2212%2E5%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2212%2E5%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2212%2E5%25%22%20fill%3D%22%232b2b74%22%20width%3D%2212%2E5%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%25%22%20fill%3D%22%23338%22%20width%3D%2212%2E5%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2237%2E5%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2237%2E5%25%22%20fill%3D%22%232b2b74%22%20width%3D%2212%2E5%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%23338%22%20width%3D%2212%2E5%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2262%2E5%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2262%2E5%25%22%20fill%3D%22%232b2b74%22%20width%3D%2212%2E5%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2275%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2275%25%22%20fill%3D%22%23338%22%20width%3D%2212%2E5%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2287%2E5%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2287%2E5%25%22%20fill%3D%22%232b2b74%22%20width%3D%2212%2E5%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
  }
}

@media (min-width: 900px) {
  .container {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22%23338%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%227%2E14286%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%227%2E14286%25%22%20fill%3D%22%232b2b74%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2214%2E28571%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2214%2E28571%25%22%20fill%3D%22%23338%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2221%2E42857%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2221%2E42857%25%22%20fill%3D%22%232b2b74%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2228%2E57143%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2228%2E57143%25%22%20fill%3D%22%23338%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2235%2E71429%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2235%2E71429%25%22%20fill%3D%22%232b2b74%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2242%2E85714%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2242%2E85714%25%22%20fill%3D%22%23338%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%232b2b74%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2257%2E14286%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2257%2E14286%25%22%20fill%3D%22%23338%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2264%2E28571%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2264%2E28571%25%22%20fill%3D%22%232b2b74%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2271%2E42857%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2271%2E42857%25%22%20fill%3D%22%23338%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2278%2E57143%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2278%2E57143%25%22%20fill%3D%22%232b2b74%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2285%2E71429%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2285%2E71429%25%22%20fill%3D%22%23338%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2292%2E85714%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2292%2E85714%25%22%20fill%3D%22%232b2b74%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
  }
}

@media (min-width: 1200px) {
  .container {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22%23338%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%226%2E25%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%226%2E25%25%22%20fill%3D%22%232b2b74%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2212%2E5%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2212%2E5%25%22%20fill%3D%22%23338%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2218%2E75%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2218%2E75%25%22%20fill%3D%22%232b2b74%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%25%22%20fill%3D%22%23338%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2231%2E25%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2231%2E25%25%22%20fill%3D%22%232b2b74%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2237%2E5%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2237%2E5%25%22%20fill%3D%22%23338%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2243%2E75%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2243%2E75%25%22%20fill%3D%22%232b2b74%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%23338%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2256%2E25%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2256%2E25%25%22%20fill%3D%22%232b2b74%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2262%2E5%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2262%2E5%25%22%20fill%3D%22%23338%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2268%2E75%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2268%2E75%25%22%20fill%3D%22%232b2b74%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2275%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2275%25%22%20fill%3D%22%23338%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2281%2E25%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2281%2E25%25%22%20fill%3D%22%232b2b74%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2287%2E5%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2287%2E5%25%22%20fill%3D%22%23338%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2293%2E75%25%22%20fill%3D%22%236666a6%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2293%2E75%25%22%20fill%3D%22%232b2b74%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
  }
}