By interpolating the Sass variable into the content property on html:before, we are able to see the variable on the page, without the need for additional markup.
We can also grab the variable type. By using the Sass function type-of(), we are able to check for the variable type, and then interpolate it into the pseudo element along side the variable. For this example we have a string of SVG code.
Without using both html:before & html:after we can separate these two items to make it more readable by using \A.
Since we can create horizontal bars with gradients, we can create 2 distinct sections, one for the variable type, and the other for the value.
Mixin
@mixin output($val, $z: 10000) {
$type: null;
@if (type-of($val) == string) {
$type: 'string';
}
@else if (type-of($val) == number) {
$type: 'number';
}
@else if (type-of($val) == bool) {
$type: 'bool';
}
@else if (type-of($val) == color) {
$type: 'color';
}
@at-root {
html {
&:after {
background: linear-gradient(to bottom, #d800ff 0, #d800ff 45px, #ed71ef 30px);
bottom: 0;
box-sizing: border-box;
color: #222;
content: '(#{$type})\A\A\A#{$val}';
font: bold 15px/15px monospace;
left: 0;
padding: 15px;
position: fixed;
white-space: pre-wrap;
width: 100%;
z-index: $z;
}
}
}
}