Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<h1 class="u-color-red">HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>#header h1 a {
display: block;
width: 300px;
height: 80px;
}</code></pre>
// ----
// libsass (v3.2.5)
// ----
// _settings.global.scss
$base-font-size: 16px;
$base-line-height: 24px;
$base-spacing-unit: $base-line-height;
$base-spacing-unit-sm: round(0.5 * $base-line-height);
$base-spacing-unit-lg: 2 * $base-line-height;
$font-size-headings: 18px;
// _tools.functions.scss
@function rem($number) {
@return $number / $base-font-size * 1rem;
}
// _tools.mixins.scss
@mixin font-size($font-size, $line-height: auto) {
font-size: $font-size;
font-size: ($font-size / $base-font-size) * 1rem;
@if $line-height == auto {
line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
}
@else {
@if (type-of($line-height) == number or $line-height == inherit or $line-height == normal) {
line-height: $line-height;
}
@elseif ($line-height != none and $line-height != false) {
@warn "D’oh! ‘#{$line-height}’ is not a valid value for `line-height`."
}
}
}
@mixin rem($property, $value) {
#{$property}: $value;
#{$property}: rem($value);
}
// _generic.reset.scss
/**
* Please use a nicer reset in production.
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// _generic.shared.scss
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset, figure,
pre {
@include rem(margin-bottom, $base-spacing-unit);
}
// _elements.page.scss
html {
font: menu;
font-size: ($base-font-size / 16px) * 1em;
line-height: $base-line-height / $base-font-size;
@include rem(padding, $base-spacing-unit);
}
// _elements.headings.scss
h1, h2, h3, h4, h5, h6 {
@include font-size($base-font-size);
font-weight: bold;
}
// _components.type.scss
.c-heading-huge {
@include font-size(48px);
@media screen and (min-width: 32em) {
@include font-size(72px, 1.4);
}
}
// _trumps.spacing.scss
$properties: (
margin: m,
padding: p
);
$directions: (
null: '',
-top: t,
-right: r,
-bottom: b,
-left: l
);
$sizes:(
null: 1,
-xs: 0.25,
-sm: 0.5,
-lg: 2,
-xl: 4
);
@each $property, $alias in $properties {
@each $direction, $shorthand in $directions {
@each $size, $factor in $sizes {
.u-#{$alias}#{$shorthand}#{$size} {
#{$property}#{$direction}: $base-spacing-unit * $factor !important;
}
}
}
}
// _trumps.debug
h1:not([class*="c-heading"]) {
//outline: 10px solid red;
&:after {
content: " H1 headings require a `.c-heading-*` class.";
color: red;
}
}
/**
* Please use a nicer reset in production.
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset, figure,
pre {
margin-bottom: 24px;
margin-bottom: 1.5rem;
}
html {
font: menu;
font-size: 1em;
line-height: 1.5;
padding: 24px;
padding: 1.5rem;
}
h1, h2, h3, h4, h5, h6 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
font-weight: bold;
}
.c-heading-huge {
font-size: 48px;
font-size: 3rem;
line-height: 1;
}
@media screen and (min-width: 32em) {
.c-heading-huge {
font-size: 72px;
font-size: 4.5rem;
line-height: 1.4;
}
}
.u-m {
margin: 24px !important;
}
.u-m-xs {
margin: 6px !important;
}
.u-m-sm {
margin: 12px !important;
}
.u-m-lg {
margin: 48px !important;
}
.u-m-xl {
margin: 96px !important;
}
.u-mt {
margin-top: 24px !important;
}
.u-mt-xs {
margin-top: 6px !important;
}
.u-mt-sm {
margin-top: 12px !important;
}
.u-mt-lg {
margin-top: 48px !important;
}
.u-mt-xl {
margin-top: 96px !important;
}
.u-mr {
margin-right: 24px !important;
}
.u-mr-xs {
margin-right: 6px !important;
}
.u-mr-sm {
margin-right: 12px !important;
}
.u-mr-lg {
margin-right: 48px !important;
}
.u-mr-xl {
margin-right: 96px !important;
}
.u-mb {
margin-bottom: 24px !important;
}
.u-mb-xs {
margin-bottom: 6px !important;
}
.u-mb-sm {
margin-bottom: 12px !important;
}
.u-mb-lg {
margin-bottom: 48px !important;
}
.u-mb-xl {
margin-bottom: 96px !important;
}
.u-ml {
margin-left: 24px !important;
}
.u-ml-xs {
margin-left: 6px !important;
}
.u-ml-sm {
margin-left: 12px !important;
}
.u-ml-lg {
margin-left: 48px !important;
}
.u-ml-xl {
margin-left: 96px !important;
}
.u-p {
padding: 24px !important;
}
.u-p-xs {
padding: 6px !important;
}
.u-p-sm {
padding: 12px !important;
}
.u-p-lg {
padding: 48px !important;
}
.u-p-xl {
padding: 96px !important;
}
.u-pt {
padding-top: 24px !important;
}
.u-pt-xs {
padding-top: 6px !important;
}
.u-pt-sm {
padding-top: 12px !important;
}
.u-pt-lg {
padding-top: 48px !important;
}
.u-pt-xl {
padding-top: 96px !important;
}
.u-pr {
padding-right: 24px !important;
}
.u-pr-xs {
padding-right: 6px !important;
}
.u-pr-sm {
padding-right: 12px !important;
}
.u-pr-lg {
padding-right: 48px !important;
}
.u-pr-xl {
padding-right: 96px !important;
}
.u-pb {
padding-bottom: 24px !important;
}
.u-pb-xs {
padding-bottom: 6px !important;
}
.u-pb-sm {
padding-bottom: 12px !important;
}
.u-pb-lg {
padding-bottom: 48px !important;
}
.u-pb-xl {
padding-bottom: 96px !important;
}
.u-pl {
padding-left: 24px !important;
}
.u-pl-xs {
padding-left: 6px !important;
}
.u-pl-sm {
padding-left: 12px !important;
}
.u-pl-lg {
padding-left: 48px !important;
}
.u-pl-xl {
padding-left: 96px !important;
}
h1:not([class*="c-heading"]):after {
content: " H1 headings require a `.c-heading-*` class.";
color: red;
}
<h1 class="u-color-red">HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>#header h1 a {
display: block;
width: 300px;
height: 80px;
}</code></pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.