Visual tests for SASS-Mixins

x-animation(jump 1s infinite ease-out);
x-keyframes(jump) {
	from { top: 0; }
	to { top: -10px; }
}

x-appearance(button);

x-background-size(100px auto);

x-border-radius(20px 10px);

x-box-shadow(5px 5px 10px 5px #aaa);

x-box-shadow(inset 1px 1px 2px #333, 5px 5px 10px 5px #aaa);

x-box-sizing(); while width: 100%; padding: 0 30px;

x-until(125em) { background: green; }
x-at-least(40em) { color: blue; }
x-breakpoints(desktop) { color: black; }

x-calc(width, '600px - 2em');

x-display-flex;

x-order(2);

x-flex(3 1 auto);

x-order(1);

x-flex(1 1 auto);

x-order(3);

x-flex(1 1 auto);

x-display-flex;

x-align-content(center);

x-flex-wrap(wrap);

x-flex-direction(row-reverse)

x-linear-gradient('to bottom', #ddd, #ddd, #555);

x-linear-gradient("to right", #ddd, #ddd, #555);

x-linear-gradient(45deg, #ddd, #ddd, #555);

x-multiple-colored-gradient("top", #aff 0%, #faf 20%, #ffa 40%, #aaf 60%, #faa 80%, #aaa 100%);

x-multiple-backgrounds(
	rgba(0, 0, 0, 0.3),
	url('../img/html5_logo.png') top right no-repeat,
	(linear-gradient, to bottom, #aaa, #ddd)
);

x-opacity(0.4);

x-placeholder(#bada55);

x-rem(font-size, 1.3);

x-rem(padding, 20px);

x-rem(padding, 16px 0 3);

x-rem(margin, 1 auto);

x-rem(border, 1 solid #bada55);

x-transform(rotate(1deg));

x-transition(background 0.3s ease-in); while :hover { background: #bbb }

x-transition(background 0.3s ease-in, color 1s); while :hover { background: #bbb; color: #f00; }

x-user-select;