.declarationOrder { /* Declarations */ $varName: #ccc; /* Sass Inheritance */ @extend %a-placeholder; @include silly-links; // Content content: ""; // Positioning position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; // Box Model display: block; float: right; width: 100rem; height: 100rem; padding: 10rem; margin: 10rem; // Typography color: $varName; font: normal 1rem "Helvetica", sans-serif; line-height: 1.3; text-align: center; // Visual background-color: $varName; border-radius: 4px; opacity: 1; // Animation transition: all 1s; // Misc user-select: none; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter