test/css/main.css
/*! sass-mixins - v0.13.0 - 2020-03-30 */
html {
  width: 100%;
  max-width: 900px;
  background: #fff;
  margin: 0 auto;
  font: 15px/2 Helvetica Neue, Helvetica, sans-serif;
  color: #000; }

.test-case {
  width: 100%;
  background: #eee;
  margin-bottom: 20px;
  border: 2px solid #aaa;
  text-align: center;
  vertical-align: middle; }

@-webkit-keyframes jump {
  from {
    top: 0; }
  to {
    top: -10px; } }

@keyframes jump {
  from {
    top: 0; }
  to {
    top: -10px; } }

.align-content {
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  -moz-align-content: center;
  align-content: center;
  height: 400px;
  background: #fff; }

.animation {
  -webkit-animation: jump 1s infinite ease-out;
  animation: jump 1s infinite ease-out;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  padding-left: 2em;
  padding-right: 2em;
  text-align: left; }

.appearance {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  display: inline-block;
  margin: 10px;
  padding: 5px; }

.background-size {
  -webkit-background-size: 100px auto;
  background-size: 100px auto;
  background: url(../img/html5_logo.png); }

.border-radius {
  -webkit-border-radius: 20px 10px;
  border-radius: 20px 10px; }

.box-shadow {
  -webkit-box-shadow: 5px 5px 10px 5px #aaa;
  box-shadow: 5px 5px 10px 5px #aaa; }

.box-shadow-multi {
  -webkit-box-shadow: inset 5px 5px 10px #333, 5px 5px 10px 5px #aaa;
  box-shadow: inset 5px 5px 10px #333, 5px 5px 10px 5px #aaa; }

.box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 0 30px; }

@media screen and (max-width: 29.99em) {
  .breakpoint {
    color: green; } }

@media screen and (min-width: 40em) {
  .breakpoint {
    color: blue; } }

@media (min-width: 1024px) {
  .breakpoint {
    color: black; } }

.calc {
  width: -webkit-calc(600px - 2em);
  width: calc(600px - 2em);
  margin: 0 auto 20px; }

.display-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.flex-1 {
  -webkit-box-flex: 1 1 auto;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }

.flex-3 {
  -webkit-box-flex: 3 1 auto;
  -moz-box-flex: 3 1 auto;
  -webkit-flex: 3 1 auto;
  -ms-flex: 3 1 auto;
  flex: 3 1 auto; }

.flex-direction {
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #c8fc98; }

.flex-wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

.linear-gradient {
  background-color: #ccc;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
  background-image: -webkit-linear-gradient(top, #ddd, #bbb);
  background-image: linear-gradient(to bottom, #ddd, #bbb); }

.linear-gradient-2 {
  background-color: #ddd;
  background-image: -webkit-gradient(linear, top left, bottom right, from(#ddd), to(#555));
  background-image: -webkit-linear-gradient(left, #ddd, #555);
  background-image: linear-gradient(to right, #ddd, #555); }

.linear-gradient-3 {
  background-color: #ddd;
  background-image: -webkit-gradient(linear, mod(405deg, 360deg), from(#fff), to(#000));
  background-image: -webkit-linear-gradient(mod(405deg, 360deg), #fff, #000);
  background-image: linear-gradient(45deg, #fff, #000);
  padding: 50px 0; }

.multiple-colored-gradient {
  /* Expected output:
	  background-image: -webkit-linear-gradient(top, red 0%, green 50%, blue 100%);
	  background-image: -moz-linear-gradient(top, red 0%, green 50%, blue 100%);
	  background-image: -ms-linear-gradient(top, red 0%, green 50%, blue 100%);
	  background-image: -o-linear-gradient(top, red 0%, green 50%, blue 100%);
	  background-image: linear-gradient(to bottom, red 0%, green 50%, blue 100%);
	*/
  background-image: -webkit-linear-gradient(top, "top", #aff 0%, #faf 20%, #ffa 40%, #aaf 60%, #faa 80%, #aaa 100%);
  background-image: linear-gradient(to bottom, "top", #aff 0%, #faf 20%, #ffa 40%, #aaf 60%, #faa 80%, #aaa 100%); }

.multiple-backgrounds {
  background: url("../img/html5_logo.png") top right no-repeat -webkit-linear-gradient(left top, left bottom, #aaa, #ddd) rgba(0, 0, 0, 0.3);
  background: url("../img/html5_logo.png") top right no-repeat, -webkit-linear-gradient(top, #aaa, #ddd), rgba(0, 0, 0, 0.3);
  background: url("../img/html5_logo.png") top right no-repeat, linear-gradient(to bottom, #aaa, #ddd), rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 2em;
  padding-right: 2em;
  text-align: left; }

.placeholder::-webkit-input-placeholder {
  color: #bada55; }

.placeholder::-moz-placeholder {
  color: #bada55; }

.placeholder:-ms-input-placeholder {
  color: #bada55; }

.opacity {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40); }

.order-1 {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
  padding: 2%;
  background-color: #c8fc98; }

.order-2 {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
  width: 60%;
  padding: 2%;
  background-color: #fff; }

.order-3 {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
  padding: 2%;
  background-color: #fde95e; }

.rem {
  font-size: 20.8px;
  font-size: 1.3 * 1rem;
  padding: 20 * 1px;
  padding: 1.25rem; }

.rem-2 {
  padding: 16 * 1px 0 48px;
  padding: 1rem 0 3 * 1rem; }

.rem-3 {
  margin: 16px auto;
  margin: 1 * 1rem auto;
  width: 50%; }

.rem-4 {
  border: 16px solid #bada55;
  border: 1 * 1rem solid #bada55;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.transform {
  -webkit-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg); }

.transition {
  -webkit-transition: background 0.3s ease-in;
  transition: background 0.3s ease-in; }
  .transition:hover {
    background: #bbb; }

.transition-multi {
  -webkit-transition: background 0.3s ease-in, color 1s;
  transition: background 0.3s ease-in, color 1s; }
  .transition-multi:hover {
    background: #bbb;
    color: #f00; }

.user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
